前台代码：

<%@ 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. substr — 详解

    substr — 返回字符串的子串 举例说明: string substr ( string $string , int $start , int $length ) 返回字符串 string 由 s ...

  2. 如何在网页端启动WinForm 程序

    在逛淘宝或者使用QQ相关的产品的时候,比如淘宝我要联系店家点击旺旺图标的时候能够自动启动阿里旺旺进行聊天.之前很奇怪为什么网页端能够自动启动客户端程序,最近在开发吉特仓储管理系统的时候也遇到一个类似的 ...

  3. 分布式系统一致性算法 raft学习

    在学习MongoDB的过程中,有博客中写道其搭建复制集时使用了raft算法,经过简单地的搜索资料后,发现了一个特别好的网站资料.这个网站用动画的形式,非常清楚和详尽的解释了整个raft算法的精要和过程 ...

  4. Unity3D中脚本的执行顺序和编译顺序

    http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与 ...

  5. caffe学习系列（4）：视觉层介绍

    视觉层包括Convolution, Pooling, Local Response Normalization (LRN), im2col等层. 这里介绍下conv层. layer { name: & ...

  6. am335x UART1输入u-boot 调试信息代码修改

    AM335x 调试信息UART1输出代码修改1. 关于pin_mux  的配置代码修改位置:/board/forlinx/ok335x/mux.c void enable_uart0_pin_mux( ...

  7. windows下nodejs常见错误

    1.express-session express-session deprecated undefined resave option; provide resave option auth_s e ...

  8. JavaScript——正则表达式

    1.显式创建正则表达式:var searchPattern=new RegExp(‘+s’);加号会匹配字符串中任何一个带有一个或者多个连续的s. 2.RegExp对象的方法:test和exec te ...

  9. POJ 1002

    #include <stdio.h> #include <string.h> #include <stdlib.h> struct In{ int a; ]; }p ...

  10. The Imitation Game

    <The Imitation Game>是一部非常好的电影,讲述了人工智能之父——阿兰图灵的传奇一生. 重点讲述了他通过破译德国的通讯密码缩短了二战的持续时间,因而拯救了无数生命的伟大事迹 ...