使用JS来实现验证码功能

2020-12-13 02:21

阅读：345

标签：style blog class code java ext

最近想为自己的Django博客添加验证码功能，本来想使用第三方库来实现的，不过考虑到添加第三方库对性能的影响，以及第三方库是否安全可靠的问题，还是用自己的代码来实现吧。反正用JS来实现验证码功能又不是很难。

简单来说，用一个create_code()方法在页面中生成验证码，然后control_submit()方法检测验证码文本框（id=“user_input_code”）的键盘输入事件，当文本框输入了超过4个字符后，调用verify_code ()检测输入的字符与生成的验证码是否一致，

假如一致的话，把提交评论按钮的disabled属性从true改为false，假如不一致的话，在页面显示验证码错误。

js代码如下：

var code ;
function create_code(){
    //生成验证码
    code = "";
    var codeLength = 4;
    var checkCode = $("#checkCode");
    var selectChar = 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‘);

    for(var i=0;i){
        var charIndex = Math.floor(Math.random()*36);
        code +=selectChar[charIndex];
    }

    if(checkCode){
        checkCode.addClass("code");
        checkCode.val(code);
    }
}

function verify_code (){
    //验证验证码
    var user_input_code = $("#user_input_code").val().toLowerCase().trim();
    if(user_input_code.length ){
        return false;
    } else if(user_input_code != code.toLowerCase()){
        return false;
    }
    return true;
}

function control_submit() {
    //当验证码验证成功后，才允许提交评论
    $("#user_input_code").keyup(function () {
        if ($("#user_input_code").val().trim().length>=4) {    
          if (verify_code()) {
               $("#submit_comment").attr("disabled", false);
           } else {
               $("#valid_failed").text("验证码错误");
           }
        } else {
             $("#valid_failed").text("");
        }
    });
}

在html页面中对应的form中增加下面元素：

 form ...>    
      input id="user_input_code" type="text" name="code" placeholder="请输入右侧的验证码"/>
      input type="text" readonly="readonly" id="checkCode" class="code" style="width: 60px;" />
      p id="valid_faild">p>
      tr>
        td colspan="2">
        input id="submit_comment" type="submit" disabled="true" name="submit" value="提交评论">
        td>
      tr>
form>

最后在css文件中修改一下验证码元素的属性，例如字符间隔，颜色，背景图片等，即可完成验证码功能。

使用JS来实现验证码功能,搜素材,soscw.com

使用JS来实现验证码功能

标签：style blog class code java ext

原文地址：http://www.cnblogs.com/cjyfff/p/3716829.html

上一篇：如何用Google APIs和Google的应用系统进行集成(1)----Google APIs简单介绍

下一篇：java基础第十篇之异常

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：使用JS来实现验证码功能
文章链接：http://soscw.com/essay/25413.html

亲，登录后才可以留言！

使用JS来实现验证码功能

评论

热门文章

推荐文章

最新文章

置顶文章