为Web登陆添加验证码功能

大家好，才是真的好。几天没见，很是想念。首先，我觉得应该换换文首的动图，但我居然没找到我新做的动图——可能我还没做吧。其次，上周新闻写得很多，这周我们就来点硬货。今天我们写写Web登陆页怎么加验证码功能。对，和标题是一样的，就算是点题。

嗯，没有分割线，但以下为严肃的技术内容。

在Domino中开启了会话验证，并创建了Domcfg.nsf数据库，Web验证登陆时便会出现以下表单界面：

在此基础上，我们加了一个验证码，效果如下：

如不输入验证码或验证码错误，当我们点击登陆按钮，则会出现相应的提示，比如“请您输入验证码”，如下图：
是不是已经实现了验证码的功能？好，今天我们的内容就到此结束。

但，其实还没有，这只是我实现的功能，你们还没有实现。

关于怎么创建domcfg.nsf我们不说，直接看图

图很大，应该看得很清楚。另外的步骤是开启Domino中的Web会话验证，这个就真不截图了。

我们继续回来主线，打开domcfg.nsf数据库之后，找到表单$$LoginUserForm双击打开

在表格中多追加两行，然后添加

和 ，用来显示验证码和提示的文字信息；另外，把提交按钮改为标签，最后效果如下图所示：

别忘了，如果提交按钮没了，系统可能会自动生成一个按钮放到左下角，所以我们得注释掉这个按钮，办法是写上 ，然后选择"文本"菜单->“内置HTML”，效果如下图：

重头戏来了，我们在JS Header中要添加生成验证码的JS代码，如下图

详细代码如下：

//页面加载时，生成随机验证码
    //生成验证码的方法
    function createCode(length) {
        var code = "";
        var codeLength = parseInt(length); //验证码的长度
        var checkCode = document.getElementById("checkCodeChar");
        所有候选组成验证码的字符，当然也可以用中文的
        var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 
        //循环组成验证码的字符串
        for (var i = 0; i < codeLength; i++)
        {
            //获取随机验证码下标
            var charNum = Math.floor(Math.random() * 62);
            //组合成指定字符验证码
            code += codeChars[charNum];
        }
        if (checkCode)
        {
            //为验证码区域添加样式名
            checkCode.className = "code";
            //将生成验证码赋值到显示区
            checkCode.innerHTML = code;
        }
    }
    //检查验证码是否正确
    function validateCode()
    {
        //获取显示生成的验证码
        var checkCode = document.getElementById("checkCode").innerHTML;
        //获取输入的验证码
        var inputCode = document.getElementById("inputCode").value;
        //console.log(checkCode);
        //console.log(inputCode);
        if (inputCode.length <= 0)
        {
            alert("请输入验证码！");
            return false
        }
        else if (inputCode.toUpperCase() != checkCode.toUpperCase())
        {
            alert("验证码输入有误！");
            createCode(4);
            return false
        }
        else
        {
           return true
        }       
};

//登陆时调用
function login()
{
var thisform=document.forms[0];

if(thisform.Username.value=="") {
thisform.Username.focus();
alert("请您输入用户名");
} else if(thisform.Password.value=="") {
thisform.Password.focus();
alert("请您输入密码");
}
else if(thisform.inputCode.value==""){
alert("请您输入验证码");
}else {
thisform.submit();
}
}

代码是够长的，不过只需要粘贴复制，所以特别简单。

还有一个步骤就能看到效果，便是在表单的onload事件中写上"createCode（4）"；如果要创建6位验证码，就请写createCode（6），但如验证码太长，会被用户打——这样，表单加载时生成验证码；

还有把HTML Body Attributes事件中的代码清干净，不用问为什么，你试试就知道。听人劝，吃饱饭。

好了，摩拳擦掌，现在可以看看效果了。

嗯，不错，但有点丑，还得加点样式进去。把下列样式表加到表单上，内置为HTML，如下图：

CSS样式也贴给大家

<style>
    .code
    {
         font-family:Arial;
         font-style:italic;
         color:blue;
         font-size:30px;
         border:0;
         padding:2px 3px;
         letter-spacing:3px;
         font-weight:bolder;            
         float:left;           
         cursor:pointer;
         width:100px;
         height:30px;
         line-height:30px;
         text-align:center;
         vertical-align:middle;
         background-color:#D8B7E3;
     }
     span {
        text-decoration:none;
        font-size:12px;
        color:#288bc4;
        padding-left:10px;
    }

    span:hover {
        text-decoration:underline;
        cursor:pointer;
    }
</style>

好看一点的效果就出现了

这种简单的基于JavaScript的验证码方式是不是很容易实现？你也许可以做得更好，也许——还做不出来。

最后，还有一个彩蛋，那就是我共享了一篇Notes Domino为什么这么特别的PPT，有兴趣可下载https://pan.baidu.com/s/1DrFaxMAqa0Fh22cFBVZLxw

好了，今天我们就写到这里，下面真的没有内容了。但请继续保持关注。

更多精彩内容请关注微信公众号“协作者”

原文地址：https://mp.weixin.qq.com/s/krGDyi-7VU70c4yEXRZOTg