登录注册验证码 js

原创 2016年08月30日 16:32:06

文件下载传送门—–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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

登录、注册的验证码

登录、注册的验证码

用 Flask 来写个轻博客 (21) — 结合 reCAPTCHA 验证码实现用户注册与登录

目录目录 前文列表 扩展阅读 添加账户管理蓝图 新建控制器蓝图 新建表单 新建蓝图 main 的视图函数 新建模板 页面效果前文列表用 Flask 来写个轻博客 (1) — 创建项目 用 Flask...
  • Jmilk
  • Jmilk
  • 2016-12-03 14:16
  • 3023

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

JSP基本注册登录系统(含验证码)

纯手工编写,希望对大家能有所帮助 首先编写注册和登录的基本页面,分别命名为regist.jsp,login.jsp,另外再创一个用于证明用户已经登录的页面提示,命名为main.jsp login....

cookie+session+登录+注册+验证码

---------------cookie-------------------------------- <?php /* * 1、在test1.php中保存cookie 名称为 name,值为...

vs2010asp.net网站制作用户注册登录界面源代码(包含验证码)并把用户信息保存到数据库sql2008

数据库名是Member login.aspx代码:                 .a         {   ...

网站注册登录等短信验证码

现在随着时代的发展,许多网站的注册,或者登录都和手机号码关联在一起,这样也方便了我们记住账号,下面我就来说一下怎么用php发短信,这个是卸载(lavarel)框架的。 这里给大家介绍一个平台--云信使...

PHP注册登录:包括数据存入数据库,生成随机验证码

自己学习html、CSS和PHP,在给自己的网站写注册和登录的时候遇到了不小的麻烦,而且现在也没弄清楚,暂时可能不再研究这方面了,所以先把我学会的部分记录下来。 首先是数据连接快捷键"ctrl+R"打...

PHP实现注册登录功能完整教程及代码 含验证码

本文包含一套完整的用php实现注册登录的代码文件 包含验证码功能 完整教程

angular获取手机验证码 移动端登录注册

之前一直在用jQuery来做项目,使用比较熟练,目前公司要求使用angular来做项目,遇到一个登录模块如下所示,功能有两个方面,一个是点击按钮获取验证码,一个是点击登录验证表单。从用户体验角度来考虑...

网站注册登录等短信验证码

网站注册登录等短信验证码标签: 短信验证码手机现在随着时代的发展,许多网站的注册,或者登录都和手机号码关联在一起,这样也方便了我们记住账号,下面我就来说一下怎么用PHP发短信,这个是卸载(lavare...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)