验证码的简单应用

Posted 2020-11-17 yutianbao

一、先写一组标签

1 <!-- 验证码 -->
2    <div class="input-prepend" title="验证码" data-rel="tooltip">
3    <input class="input-large" id="yanzhengma" name="yanzhengma" type="text" onkeydown="javascript:if(event.keyCode==13) document.getElementById(‘loginBtn‘).click();" style="width: 100px;"/>
4    <input type="button" id="code" style="width: 80px;height: 30px; background-image: url(‘statics/img/761658199044341639.jpg‘);border:none;font-size:18px; color:#00f; font-weight: bold; letter-spacing: 4px;"/>
5    </div>

二、js函数

 1 /**验证码*/
 2 function change(){
 3     var code = $("#code");
 4     //验证码组成库
 5     var arrays = new Array(‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘0‘,‘a‘,
 6     ‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘,‘i‘,‘g‘,‘k‘,‘l‘,‘m‘,‘n‘,‘o‘,‘p‘,‘q‘,‘r‘,‘s‘,
 7     ‘t‘,‘u‘,‘v‘,‘w‘,‘x‘,‘y‘,‘z‘,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘,‘G‘,‘H‘,‘I‘,‘G‘,‘K‘,‘L‘,
 8     ‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘);
 9     codes = ‘‘;//重新初始化验证码
10     for(var i=0; i<4; i++){
11             //随机获取一个数组的下标
12             var r = parseInt(Math.random()*arrays.length);
13             codes += arrays[r];
14         }
15     //验证码添加到input里
16     code.val(codes);
17 }
18 change();
19 $("#code").click(change);

$("#loginBtn").click(function(){//验证码验证
    //取得验证码并转化为大写
    var inputCode = $("#yanzhengma").val().toUpperCase();
    if(inputCode.length == 0){
        //若输入长度为0，则让重新输入验证码
        $("#yanzhengma").focus();
        $("#formtip").css("color","red");
        $("#formtip").html("请输入验证码！");
        change();
    }else if(inputCode != codes.toUpperCase()){
        //若输入有误，则让重新输入，并刷新生成码，然后清除输入框
        $("#yanzhengma").focus();
        $("#formtip").css("color","red");
        $("#formtip").html("验证码输入有误,请重新输入!");
        change();
        $("#yanzhengma").val("");
    }
}）；