验证码技术(生成)总结2-js生成(改进)

来源：互联网发布：淘宝日系男装编辑：程序博客网时间：2024/06/16 08:54

题外话：有时候很纠结。在打汉字的时候，若需要用到括号的地方，我是用()呢，还是用（）呢。

第一篇中验证码的缺陷

无法刷新验证码
只有数字没有字母
其他（提示错误后，没有自动聚焦清空输入框）

下面我们一一解决以上三点问题

无法刷新验证码

在代码中添加以下函数用来刷新验证码：
//刷新验证码function change(){    $("#validateCode").html("");        zcylValidateCode();}
当然，这些远远不足，还需要将显示验证码的div添加点击事件，调用上面的change函数：
#点击验证码刷新$("#validateCode").click(function(){    change();});

只有数字，没有字母

这我们就要到去改造生它(验证码)的函数中了，你看出了什么变化吗？：

更改之前的代码：

function zcylValidateCode() {    //初始化验证码    var a = Math.floor(Math.random() * 10);    var b = Math.floor(Math.random() * 10);    var c = Math.floor(Math.random() * 10);    var d = Math.floor(Math.random() * 10);    $("#validateCode").html(a);    $("#validateCode").append(b).append(c).append(d);}

更改以后的代码：

function zcylValidateCode() {    //新增字母，区分大小写    var numAndLetterArray = ["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"];    //初始化验证码    var a = Math.floor(Math.random() * 36);    var b = Math.floor(Math.random() * 36);    var c = Math.floor(Math.random() * 36);    var d = Math.floor(Math.random() * 36);    $("#validateCode").html(numAndLetterArray[a]);    $("#validateCode").append(numAndLetterArray[b]).append(numAndLetterArray[c]).append(numAndLetterArray[d]);}

其他缺陷

忽略大小写验证，验证码填写错误自动聚焦清空，以下代码那是极好的：

$("#validate").focusout(function(){    var validateInput = $("#validate").val();    var validateCode =  $("#validateCode").html();    //添加下面2行代码忽略大小写验证    var validateInput = validateInput.toLocaleLowerCase();    var validateCode = validateCode.toLocaleLowerCase();    if( validateInput != validateCode ){        alert("验证码填写错误!");$("#validate").val("").focus();    }});

最终的代码如下所示：百度网盘下载地址

<!DOCTYPE html>
<html>
   <head>
       
       <meta charset="UTF-8" />
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
       <script type="text/javascript">
       function zcylValidateCode() {
           //新增字母，区分大小写
           var numAndLetterArray = ["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"];
           //初始化验证码
           var a = Math.floor(Math.random() * 36);
           var b = Math.floor(Math.random() * 36);
           var c = Math.floor(Math.random() * 36);
           var d = Math.floor(Math.random() * 36);
           $("#validateCode").html(numAndLetterArray[a]);
           $("#validateCode").append(numAndLetterArray[b]).append(numAndLetterArray[c]).append(numAndLetterArray[d]);
       }
       //刷新验证码
       function change(){
           $("#validateCode").html("");
           zcylValidateCode();
       }
       $(document).ready(function(){
           zcylValidateCode();
           //焦点离开输入框时，进行验证码校验
           $("#validate").focusout(function(){
               var validateInput = $("#validate").val();
               var validateCode = $("#validateCode").html();
               //添加下面2行代码忽略大小写验证
               var validateInput = validateInput.toLocaleLowerCase();
               var validateCode = validateCode.toLocaleLowerCase();

               if( validateInput != validateCode ){
                   alert("验证码填写错误!");
                   $("#validate").val("").focus();
               }
           });

           $("#validateCode").click(function(){
               change();
           });


       });

       </script>
   </head>
   <body>
       <input type="text" required="required" placeholder="验证码"
               autocomplete="off" id="validate" title="验证码" style="float: left;">
       <div style="background-color: grey; float:left; width: 50px; margin-left: 5px; cursor: pointer;" id="validateCode"></div>
   </body>
</html>

0 0