JS生成验证码

最新推荐文章于 2023-12-04 20:58:00 发布

zhuojb

最新推荐文章于 2023-12-04 20:58:00 发布

阅读量75

点赞数

分类专栏： JavaScript 文章标签： JS生成验证码

本文链接：https://blog.csdn.net/zhuojb/article/details/84274903

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏


<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Validator</title>
        <style type="text/css">
            .code {
                background-image: url(code.jpg);
                font-family: Arial;
                font-style: italic;
                color: Red;
                border: 0;
                padding: 2px 3px;
                letter-spacing: 3px;
                font-weight: bolder;
            }

            .unchanged {
                border: 0;
            }
        </style>
    </head>
    <body onload="createCode()">
        <script language="javascript" type="text/javascript">

            var code; //在全局 定义验证码   
            function createCode(){
                code = "";
                var codeLength = 6;//验证码的长度   
                var checkCode = document.getElementById("checkCode");
                var selectChar = new Array(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');//所有候选组成验证码的字符，当然也可以用中文的      
                for (var i = 0; i < codeLength; i++) {
                    var charIndex = Math.floor(Math.random() * 36);
                    code += selectChar[charIndex];
                }
                if (checkCode) {
                    checkCode.className = "code";
                    checkCode.value = code;
                    checkCode.blur();
                }
            }

            function validate(){
                var inputCode = document.getElementById("validCode").value;
                if (inputCode.length <= 0) {
                    alert("请输入验证码！");
                }
                else 
                    if (inputCode.toUpperCase() != code) {
                        alert("验证码输入错误！");
                        createCode();//刷新验证码   
                    }
                    else {
                        alert("^-^ OK");
                    }
            }
        </script>
        <form action="#">
            <input type="text" id="validCode" /><input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px;cursor:pointer"/>
            <br/>
            <input id="Button1" onclick="validate();" type="button" value="确定" />
        </form>
    </body>
</html>