前端开发JS随机验证码

excel前端程序开发|程序开发前端后端区分|前端开发面试项目展示

html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <meta name=”keywords” content=”aoliann”>
    <title>登录验证码验证-jq22.com</title>
    <script src=”http://libs.baidu.com/jquery/1.11.3/jquery.min.js”></script>
    <style>
        .code {
            background-image: url(111.jpg);
            font-family: Arial, 宋体;
            font-style: italic;
            color: green;
            border: 0;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
        }
        .unchanged {
            border: 0;
        }
    </style>
</head>
<body>
    <input type=”text” id=”input1″ />
    <input type=”button” id=”checkCode” class=”code” style=”width:60px” onClick=”createCode()” />
    <a href=”#” onClick=”createCode()”>看不清</a>
    <input id=”Button1″ onClick=”validate();” type=”button” value=”确定” />
    <script>
        var code; //在全局 定义验证码
        function createCode() {
            code = new Array();
            var codeLength = 4; //验证码的长度
            var checkCode = document.getElementById(“checkCode”);
            checkCode.value = “”;
            var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘J’, ‘K’, ‘L’, ‘M’, ‘N’, ‘P’, ‘Q’, ‘R’, ‘S’, ‘T’, ‘U’, ‘V’, ‘W’, ‘X’, ‘Y’, ‘Z’);
            for (var i = 0; i < codeLength; i++) {
                var charIndex = Math.floor(Math.random() * 32);
                code += selectChar[charIndex];
            }
            if (code.length != codeLength) {
                createCode();
            }
            checkCode.value = code;
        }
        function validate() {
            var inputCode = document.getElementById(“input1”).value.toUpperCase();
            if (inputCode.length <= 0) {
                alert(“请输入验证码!”);
                return false;
            } else if (inputCode != code) {
                alert(“验证码输入错误!”);
                createCode();
                return false;
            } else {
                alert(“输入正确!”);
                return true;
            }
        }</script>
</body>
</html>

学前端开发需要美术功底吗|前端开发需要对jsp了解多少|前端开发需不需要学数据库

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

评论 抢沙发

评论前必须登录!