登录注册验证码 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

使用@ResponseBody返回中文字符串,出现的乱码解决方式

@RequestMapping(value="/xxx", produces = "text/html;charset=UTF-8") 这是将spring的编码格式改为utf-8;spring的默认...

日期处理util

package com.henghao.nfc.util; import java.text.ParseException; import java.text.SimpleDate...

登录、注册的验证码

登录、注册的验证码

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

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

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

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

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

---------------cookie--------------------------------

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

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

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

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

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

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

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

本文包含一套完整的用php实现注册登录的代码文件 包含验证码功能 完整教程...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:登录注册验证码 js
举报原因:
原因补充:

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