<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#中的日期处理

    1.字符串转化为日期 1.1第一种方式 使用 Convert.toDateTime 方法,该方法有很多重载方法,这里笔者就介绍两个常用的重载方法. 第一种: 使用: Convert.ToDateTim ...

  2. JetBrains C++ IDE CLion配置与评测

    等了大半年的JetBrains C++ IDE千呼万唤始出来!上次我猜2014年肯定发布,今天经@wet2_cn同学的提醒,我去官博一看,嘿!有了!赶紧安装试了一把,感觉这是迄今为止用过最好的Cpp ...

  3. Mac 下查看网络端口占用情况

    1.Mac 下查看网络端口占用情况 有的时候关闭了服务器,但是端口还是占用,解决的方法是 kill 掉占用该端口的进程. # 查看 8009 端口的占用情况 $ lsof -i:8009 可以看到,该 ...

  4. Selenium2自动化测试实战序言

    记得很久之前接触自动化的时候看了一本关于某早期自动化测试工具的书,书名已经记不得了,内容却一直印象深刻.因为那本书根本就是把官方文档有选择性的翻译一遍,对于实际应用来说其作用几乎是零.因此从那时候起我 ...

  5. FreeSWITCH协议参数之自定义sip header

    一.主动发送 1. 加入sip_h_前缀 这样FreeSWITCH就能自动加上后面的扩展头. 2. 示例 <action application="set" data=&qu ...

  6. 一个Demo带你彻底掌握View的滑动冲突

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 近期在又一次学习Android自己定义View这一块的内容.遇到了平时开发中常常碰到的一个棘手问题:View的滑 ...

  7. EndNote 输出样式模板（根据国家标准制订）

    EndNote 输出样式模板(根据国家标准制定)   EndNote 相当于一个数据库,将添加/导入的文献存档.需要引用文献的时候就从中选择一个插入到文档中,EndNote 会自动给你编号.在文档末尾 ...

  8. notepad++添加插件管理器

    notepad++ 是一个很不错的文本编辑器,添加一些插件可以更好地使用. 首先需要使用插件管理器,最新版本的github地址是:https://github.com/bruderstein/nppp ...

  9. tomcat 8.0 进程没有全部杀死

    The web application [FileIO_new_interface] created a ThreadLocal with key of type [java.lang.ThreadL ...

  10. Gradle 1.12用户指南翻译

    http://blog.csdn.net/maosidiaoxian/article/category/2219983