登录注册验证码 js

最新推荐文章于 2024-09-17 09:32:35 发布

shl999

最新推荐文章于 2024-09-17 09:32:35 发布

阅读量1.9k

点赞数 1

分类专栏： javascript jQuery 文章标签： javascript 验证码

本文链接：https://blog.csdn.net/u014665035/article/details/52370567

版权

javascript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

文件下载传送门—–http://pan.baidu.com/s/1nuMLIQ1

css部分：

<style type="text/css">
        .code {  font-style: italic;  color: blue;  font-size: 30px;  border: 0;  padding: 2px 3px;
            letter-spacing: 3px;  font-weight: bolder;  float: left;  cursor: pointer;
            width: 150px;  height: 60px;  line-height: 60px;  text-align: center;  vertical-align: middle;  }
        a {  text-decoration: none;  font-size: 12px;  color: #288bc4;  }
        a:hover {  text-decoration: underline;  }
    </style>

js部分：

<script>
        var code;
        function createCode() {
            code = "";
            var codeLength = 4; //验证码的长度
            var checkCode = document.getElementById("checkCode");
            var codeChars = 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',
                    '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 charNum = Math.floor(Math.random() * 52);
                code += codeChars[charNum];
            }
            if (checkCode) {
                checkCode.className = "code";
                checkCode.innerHTML = code;
            }
        }
        function validateCode() {
            var inputCode = document.getElementById("inputCode").value;
            if (inputCode.length <= 0) {
                alert("请输入验证码！");
            }
            else if (inputCode.toUpperCase() != code.toUpperCase()) {
                alert("验证码输入有误！");
                createCode();
            }
            else {
                alert("验证码正确！");
            }
        }
    </script>

html部分：

<body onload="createCode()">
<form id="form1" onsubmit="validateCode()">
    <div>
        <table border="0" cellspacing="5" cellpadding="5">
            <tr>
                <td></td>
                <td>
                    <div class="code" id="checkCode" onclick="createCode()"></div>
                </td>
                <td><a href="#" onclick="createCode()">看不清换一张</a></td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td><input style="float:left;" type="text" id="inputCode"/></td>
                <td>请输入验证码</td>
            </tr>
            <tr>
                <td></td>
                <td><input id="Button1" onclick="validateCode();" type="button" value="确定"/></td>
                <td></td>
            </tr>
        </table>
    </div>
</form>
</body>