jQuery验证码生成与验证-优快云博客

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/79256902

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery验证码</title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
        <style>
            #code{border: none;color: #007DDB;font-style: italic;letter-spacing: 2px;font-weight:bold;width: 60px;text-align: center;}
            #code:focus{outline: none;} /*点击时不会出现边框 */
        </style>
    </head>
    <body>
        <div>
            <input type="text" id="text" />
            <input type="button" id="code" onclick="getCode()" />
            <input type="button" value="验证" onclick="validate()" />
        </div>

        <script>

            $(function(){
                getCode();
            });
            var code; /*存放验证码*/
            function getCode(){
                code='';  /*默认code为空*/
                var codes=[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<4;i++){  /*获取长度为4的验证码*/
                    var j=Math.floor(Math.random()*62);/*从codes数组下标随机获取数字0-61,存入arr*/
                    code+=codes[j];
                }
                $("#code").val(code); /*把得到的验证码赋值给显示按钮*/
            }

            function validate(){
                var input=$("#text").val();
                var reg=/^[0-9a-zA-Z]{4}$/;
                if(reg.test(input)){   /*对输入的验证码的格式进行验证*/
                    if(input.toLowerCase()==code.toLowerCase()){  /*把验证码都转为小写在比较*/
                        alert("验证成功");
                        location.href="http://www.baidu.com";
                        return false;
                    }else{
                        alert("验证码错误,请重新输入");
                        $("#text").val("");
                        getCode();
                    }
                }else{
                    alert("验证码的格式错误,请重新输入");
                    $("#text").val("");
                    getCode();
                }

            }
        </script>
    </body>
</html>