前台代码：

<%@ 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. iOS 字符转换

    字典或者数组转化为nsstring NSArray *arr = [NSArray arrayWithObject:@"1"]; NSString *str = [arr JSON ...

  2. 今天微信群需要人家通过吗？是微信bug吗

    今天遇到微信群拉人的问题,所以来和大家取经,刚开始拉人一下就拉进去了,后来拉的需要人家通过,今天朋友些也帮我拉人也是这样的,所以想问下微信群扩容的问题.晚上有位朋友跟我说一次拉十个人,不能拉多,这样就 ...

  3. 【C语言入门教程】2.8 C 语言的预处理命令

    预处理命令是在程序编译阶段进行执行的命令,用于编译与特定环境相关的可执行文件.预处理命令扩展了 C 语言,本节将选择其中一些常用的预处理命令进行讲解. 2.8.1 宏替换命令 宏替换命令的作用类似于对 ...

  4. Linux C select函数详解

    select IO复用机制: http://www.cnblogs.com/hjslovewcl/archive/2011/03/16/2314330.html http://blog.csdn.ne ...

  5. 用jQuery编的一个分页小代码

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

  6. HDU 5122 K.Bro Sorting（2014北京区域赛现场赛K题 模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5122 解题报告:定义一种排序算法,每一轮可以随机找一个数,把这个数与后面的比这个数小的交换,一直往后判 ...

  7. tableView 选中cell时，获取到当前cell

    // >> 找到当前选中的cell,设置选中时的cell背景色 SideTableViewCell * cell = (SideTableViewCell *)[tableView cel ...

  8. linux/windows下启用和停止VMware后台服务的脚本

    linux/windows下启用和停止VMware后台服务的脚本 linux/windows下启用和停止VMware后台服务的脚本 linux平台 windows平台 本文由乌合之众 lym瞎编,欢迎 ...

  9. PHP5.4开启zend opcache缓存

    PHP5.5整合了zend opcache,但是5.4以下的需要自己安装. 介绍一下开启opcache方法,环境为wamp(php5.4.16) 下载dll文件 把php_opcache.dll放进p ...

  10. PHP--获取响应头(Response Header)方法

    方法一: $baiduUrl = "http://www.baidu.com/link";   file_get_contents($baiduUrl); $responseInf ...