验证码的简单应用

一、先写一组标签

<!-- 验证码 -->
   <div class="input-prepend" title="验证码" data-rel="tooltip">
   <input class="input-large" id="yanzhengma" name="yanzhengma" type="text" onkeydown="javascript:if(event.keyCode==13) document.getElementById('loginBtn').click();" style=" 100px;"/>
   <input type="button" id="code" style=" 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函数

/**验证码*/
function change(){
    var code = $("#code");
    //验证码组成库
    var arrays = new Array('1','2','3','4','5','6','7','8','9','0','a',
    'b','c','d','e','f','g','h','i','g','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','G','K','L',
    'M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
    codes = '';//重新初始化验证码
    for(var i=0; i<4; i++){
            //随机获取一个数组的下标
            var r = parseInt(Math.random()*arrays.length);
            codes += arrays[r];
        }
    //验证码添加到input里
    code.val(codes);
}
change();
$("#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("");
    }
}）；