<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>

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("input").value.toUpperCase(); //取得输入的验证码并转化为大写

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

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

}

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

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

createCode();//刷新验证码

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

}

else { //输入正确时

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

}

}

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

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

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

  2. 纯js生成验证码

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

  3. H5+JS生成验证码

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

  4. js生成验证码并验证

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

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

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

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

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

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

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

  8. js生成验证码

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

  9. js生成[n,m]的随机数

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

随机推荐

  1. MVC 基础和增删改、登录

    一.什么是MVC?1.了解MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式:       Model(模型)表示应用程序核心 ...

  2. java基础快捷键（1）

    1)  输出快捷键:System.out.println():在键盘上输入  Syso  然后按  Alt + ?:就出来了:System.out.println(); 2)主方法:(main): 快 ...

  3. cookie以及cookie的作用

    ios中对cookie操作的两个类分别是:1. NSHTTPCookie  2. NSHTTPCookieStorage,具体的使用在这里就不多说了. 1.什么是Cookie("小甜饼&qu ...

  4. CURLcode curl_easy_setopt（原创）

    中文翻译: curl_easy_setopt() libcurl 手册 curl_easy_setopt() 名称 curl_easy_setopt -curl的设置选项 概要 #include &l ...

  5. 根据UIColor对象,获取对应的RGBA值

    - (NSArray *)getRGBWithColor:(UIColor *)color { CGFloat red = 0.0; CGFloat green = 0.0; CGFloat blue ...

  6. Android开发学习---使用XmlPullParser解析xml文件

    Android中解析XML的方式主要有三种:sax,dom和pull关于其内容可参考:http://blog.csdn.net/liuhe688/article/details/6415593 本文将 ...

  7. markdown基本操作

    #                                    一级标题 ##                                  二级标题,以此类推 - 或者 *       ...

  8. 最简单的访问google的办法

    我用的是猎豹浏览器,在工具下面的猎豹应用市场里面,搜索红杏,安装即可. 打开google产品地址时,如果地址栏里面右边的杏是绿色的,代表正常,如果是红色的,代表不正常. 可能是装了其他代理软件,如Sw ...

  9. HibernateTemplate的一些常用方法总结

    1:get/load存取单条数据 public Teacher getTeacherById(Long id) { return (Teacher)this.hibernateTemplate.get ...

  10. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...