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

JavaWeb实现登录注册与验证码。

写JavaWeb的准备工作: 首先准备好数据库和Myeclipse,这里以mysql为例,再下载好SQL的图形化操作界面SQLyog,在数据库中建张表 。 详细步骤: ...
  • qq_24831411
  • qq_24831411
  • 2015年07月24日 20:50
  • 3631

手机验证码登录与注册

注册大概要实现几个API: 1.收到注册电话号码,验证号码格式有效后,生成验证码,并提交到短信发送队列中。短信处理任务负责将队列中的短信发送到相应的短信供应商API中,得到处理结果,如果正确,则返回...
  • dskwe
  • dskwe
  • 2016年01月11日 21:39
  • 3027

C# Web 端添加登录验证码

写在前面:最近做的学校项目需要添加登录验证码,而我又是一个刚转专业到计算机的学渣,所以对添加 Web 端验证码一窍不通。不过在请教了同学,以及在网上找各种资料,经过自己的测试,算是加了一个简单的登录验...
  • zhangzhe_0305
  • zhangzhe_0305
  • 2017年09月14日 08:47
  • 765

如何在用户注册或登录时使用验证码图片

如何在用户注册或登录时使用验证码图片 胡立新1、 策略1.1   在用户登录或注册的jsp页面上创用验证码图片,显示在界面上,同时将验证码构成的字符串保存到会话中。1.2   在后台检查用户上传的验证...
  • nlhlx
  • nlhlx
  • 2007年03月19日 23:51
  • 3595

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

---------------cookie--------------------------------
  • u014804506
  • u014804506
  • 2017年01月10日 23:19
  • 802

js 登录注册

注册页面     注册             .content         {             width: 400px;             height: auto;    ...
  • guozh90
  • guozh90
  • 2012年07月05日 08:49
  • 6978

实现注册或登录图片验证码实例

  • 2014年04月09日 00:28
  • 4.74MB
  • 下载

简述短信验证码登录功能实现

最近做了一个系统的短信验证与登录的功能,这里简述一下实现方法。 首先需要有一个发短信的第三方平台接口,调用其接口即可对相应手机号进行短信发送,这边是向某平台购买了此种接口。对方提供了相关接口文档,以及...
  • wuqingdeqing
  • wuqingdeqing
  • 2017年09月10日 13:23
  • 1313

简单的登录、注册以及带有验证码功能

Login.aspx页面            .style1 { font-size: 13px;  font-family: "黑体";  font-...
  • y306984159
  • y306984159
  • 2017年05月29日 08:55
  • 376

快速开发android应用2-使用TextInputLayout实现用户登录及验证

概述本次快速开发Android应用系列,是基于课工场的公开课高效Android工程师6周培养计划,记录微服私访APP的整个开发过程以及当中碰到的问题,供日后学习参考。 上一篇我们主要学习了项目背景以...
  • youyu_torch
  • youyu_torch
  • 2017年07月07日 23:21
  • 12562
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:登录注册验证码 js
举报原因:
原因补充:

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