小利的博客

前端新手----

登录注册验证码 js

文件下载传送门—–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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014665035/article/details/52370567
文章标签: javascript 验证码
个人分类: javascript jQuery
上一篇css水平垂直居中三种实现方法
下一篇不使用flash的复制插件
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭