前端开发jQuery怎么做验证码?

前端开发经验总结分享|前端开发表格怎么设置列?|自学web前端开发 知乎

html 代码

<!Doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端手机端开发曲屏:jquery验证码</title>
    <style type=”text/css”>
        #code {
            width: 80px;
            height: 30px;
            font-size: 20px;
            font-family: Arial;
            font-style: italic;
            font-weight: bold;
            border: 0;
            letter-spacing: 2px;
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <input type=”text” id=”input” />
        <input type=”button” id=”code” />
        <input type=”button” value=”验证” id=”check” />
    </div>
    <script type=”text/javascript” src=”http://libs.baidu.com/jquery/2.0.0/jquery.js”></script>
    <script type=”text/javascript”>
        function change() {
            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’, ‘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’
            );
            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);
        //单击验证
        $(“#check”).click(function () {
            var inputCode = $(“#input”).val().toUpperCase(); //取得输入的验证码并转化为大写
            console.log(inputCode);
            if (inputCode.length == 0) { //若输入的验证码长度为0
                alert(“请输入验证码!”); //则弹出请输入验证码
            } else if (inputCode != codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
                alert(“验证码输入错误!请重新输入”); //则弹出验证码输入错误
                change(); //刷新验证码
                $(“#input”).val(“”); //清空文本框
            } else { //输入正确时
                alert(“正确”); //弹出^-^
            }
        });
    </script>
</body>
</html>

前端开发兼容华为手机类型|手机wap前端开发标准|excel前端程序开发

» 本文来自:前端开发者 » 《前端开发jQuery怎么做验证码?》
» 本文链接地址:https://www.rokub.com/4219.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!