<html>

        <head>

            <title>验证码</title>

            <style type="text/css">

                #code

                {

                    font-family:Arial;

                    font-style:italic;

                    font-weight:bold;

                    border:0;

                    letter-spacing:2px;

                    color:blue;

                }

            </style>

            <script type = "text/javascript" src = "checkCode.js">

            </script>

        </head>

        <body>

            <div>

                <input type = "text" id = "input"/>

                <input type = "button" id="code" onclick="createCode()"/>

                <input type = "button" value = "验证" onclick = "validate()"/>

            </div>

        </body>

    </html>

checkCode.js

var code ; //在全局定义验证码

//产生验证码

window.onload = createCode;

function createCode(){

    code = "";

 var codeLength = 4;//验证码的长度

 var checkCode = document.getElementById("code");

 var random = 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');//随机数

 for(var i = 0; i < codeLength; i++) {//循环操作

    var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）

    code += random[index];//根据索引取得随机数加到code上

}

checkCode.value = code;//把code值赋给验证码

}

//校验验证码

function validate(){

    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写

if(inputCode.length <= 0) { //若输入的验证码长度为0

    alert("请输入验证码！"); //则弹出请输入验证码

}

else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

    alert("验证码输入错误！@_@"); //则弹出验证码输入错误

    createCode();//刷新验证码

    document.getElementById("input").value = "";//清空文本框

}

else { //输入正确时

    alert("^-^"); //弹出^-^

    }

}

js生成验证码并且验证的更多相关文章

  1. js生成验证码并验证

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...

  2. js生成验证码并验证的登录页面

    <!Doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

  3. 纯js生成验证码

    实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  4. JAVA WEB项目中生成验证码及验证实例（附源码及目录结构）

    [我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...

  5. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...

  6. node.js生成验证码及图片

    示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...

  7. js生成验证码并检验

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  8. js生成验证码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js生成验证码并且判断

       <style type="text/css">        .code        {            font-family: Arial;      ...

随机推荐

  1. C/C++/动态链接库DLL中函数的调用约定与名称修饰

    参见:http://blog.twofei.com/cc/impl/calling-convension.html 调用约定(Calling Convention)是指在程序设计语言中为了实现函数调用 ...

  2. dbms_monitor开启/关闭会话跟踪

    从10g开始,可以使用dbms_monitor开启/关闭会话跟踪. sql> desc dbms_monitor procedure client_id_stat_disable argumen ...

  3. 供CImage类显示的半透明PNG文件处理方法

    原文链接: http://blog.sina.com.cn/s/blog_4070692f010003gy.html   前补:没想到这个帖子好像挺多人看哪……看来大家都被这个png郁闷的够呛.显示p ...

  4. C#中const 详细分析与说明

    const是一个c语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性,另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程序也有一些帮 ...

  5. Exception的妙用

    实际工作中遇到的一个例子: 一.看这样一个方法: /** 传入以微秒(us)为单位的时间字符串,转换成可读的(年-月-日 时:分:秒)日期格式*/ public String getDateStrin ...

  6. debian 8 解压安装mysql（版本5.7.19）

    debian 8 解压安装mysql(版本5.7.19)一.下载 根据目标主机的型号官网下载mysql安装包如: mysql-server_5.7.19-1debian8_amd64.deb-bund ...

  7. 利用 T-sql 的从句 for xml path('') 实现多行合并到一行, 并带有分隔符

    T-sql 有一个for xml path('')的从句能把多行结果合并到一行,并成为xml 格式 比如有一张表tb有两列,其格式和数据为: id value—————1 aa1 bb2 aaa2 b ...

  8. CentOS7.2安装pure-ftpd 及其配置项

    CentOS7.2安装FTP(pure-ftpd-1.0.43) 原文链接: https://www.linuxidc.com/Linux/2016-10/135971.htm [日期:2016-10 ...

  9. Winform开发框架之通用高级查询模块--SNF快速开发平台3.3-Spring.Net.Framework

    最近项目确实忙,但也是一直忙于有关项目和框架技术的事情,也一直致力于改善我的WInform开发框架.使得自己及客户使用起来更加方便,更加友好,更加高效. 在很多程序模块中都很常见,也是给客户扩展查询的 ...

  10. 如何使用git 提交作业 收作业

    如何使用git 提交作业 收作业 方法论: 今天就来用一个通俗易懂的自然模型来解释Git的commit,pull和push.不过,我们首先要理解两个名词,remote,local. remote,翻译 ...