前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="checkCode.js" type="text/javascript"></script>
    <style type="text/css">
        #code
        {
            font-family: Arial;
            font-style: italic;
            font-weight: bold;
            border: 0;
            letter-spacing: 2px;
            color: blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="input" />
        <input type="button" id="code" onclick="createCode()" />
        <input type="button" value="验证" onclick="validate()" />
    </div>
    </form>
</body>
</html>

我这里是aspx页面。

checkCode.js文件

var code; //在全局定义验证码   
//产生验证码  
window.onload = 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("vali_code").value.toUpperCase(); //取得输入的验证码并转化为大写        
    if (inputCode.length <= 0) { //若输入的验证码长度为0  
        alert("请输入验证码！"); //则弹出请输入验证码
        return false;
    }
    else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时  
        alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
        createCode(); //刷新验证码  
        document.getElementById("vali_code").value = ""; //清空文本框
        return false;
    }
    else { //输入正确时  
        alert("^-^"); //弹出^-^  
    }
}

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

  1. js生成验证码并且验证

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

  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. Ubuntu 12 修改环境变量

    Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环境变量.系统环境变量对所有系统用户都有效,用户环境变量仅仅对当前的用户有效. 修改用户环境变量 用户环境变量通常被存储在下面的文件中: ...

  2. Knockout.Js案例一Introduction

    </strong></p> <p>Last name: <strong data-bind="text:lastName ">tod ...

  3. 用 FragmentManager 替换时使用 GoogleMaps 崩溃 app

    我要用下面的代码来加载的片段的项已被选定在 NavigationDrawer,然而 MapFragment 包含它里面的谷歌地图片段和它崩溃后试图打开它第二次. 这里是我使用的代码: @Overrid ...

  4. 字符集与编码01--charset vs encoding

    声明:此文章转载自 http://my.oschina.net/goldenshaw/blog/304493 许多时候,字符集与编码这两个概念常被混为一谈,但两者是有差别的,作为深入理解的第一步,首先 ...

  5. js图文讲解

       

  6. ios中二维码的使用之一： 二维码的生成

    iOS在7之后,具备了原生的二维码生成API; 生成二维码的准备:  #import <CoreImage/CoreImage.h> 导入框架: 开始生成: //1- 创建过滤器 CIFi ...

  7. [转载]MySQL5.5 配置文件 my.ini 1067错误

    原文链接:http://blog.csdn.net/xiaochunyong/article/details/7438200 解压mysql-5.5.22-win32.zip后的目录中有5个my-xx ...

  8. 剑指Offer 两个链表的第一个公共结点

    题目描述 输入两个链表,找出它们的第一个公共结点.   思路: 题目说的很笼统,应该是有2个链表,找出公共点,第一个公共点后面的链表是共同所有的.可以用map做,直接检测map里有没有出现这个节点. ...

  9. 初识Flask

    首先在学习flask的前提,我是使用了很久的django和tornado,现在在写总结也是本着工作后方便使用flask 少点东西,对flask的介绍和优点总结 1.安装 pip install fla ...

  10. （转）HTTP长连接和短连接

    1. HTTP协议与TCP/IP协议的关系 HTTP的长连接和短连接本质上是TCP长连接和短连接.HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议.IP协议主要解决网络路由和寻址问 ...