<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. WCF服务二：创建一个简单的WCF服务程序

    在本例中,我们将实现一个简单的计算服务,提供基本的加.减.乘.除运算,通过客户端和服务端运行在同一台机器上的不同进程实现. 一.新建WCF服务 1.新建一个空白解决方案,解决方案名称为"WC ...

  2. 苹果手机overflow:auto的卡顿

    如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象.但是在android系统的手机上则不会出现该问题 通过一个早上的百度搜索和与前端 ...

  3. JSP开发模式1（简单注册功能）

    ———————————————————————————————————————————————— import java.util.regex.Matcher;import java.util.reg ...

  4. Winfrom实现圆角设计

    主要代码 public partial class Form1 : Form    {        public Form1()        {            InitializeComp ...

  5. codeforces 742D (分组背包)

    D. Arpa's weak amphitheater and Mehrdad's valuable Hoses   Just to remind, girls in Arpa's land are ...

  6. python学习之——selenium元素定位

    web自动化测试按步骤拆分,可以分为四步操作:定位元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告. 其中定位元素尤为关键,此篇是使用webdriver通过页面各个 ...

  7. OC基础语法之方法

    看惯了c#的代码再去看Object-C的代码,总感觉有点懵逼,记录下OC的方法用法:   在OC中一个类中的方法有两种类型:实例方法(类似于非静态函数),类方法(类似非静态函数). 实例方法前用(-) ...

  8. artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

    artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

  9. Zabbix（一）--zabbix 2.4.8 安装

    zabbix依赖于LAMP,所以部署前要先保证这个平台. 安装服务端(Server) zabbix官网的rpm包都是按照功能分开一个个,比如: zabbix-server-2.4.7-1.el7.x8 ...

  10. PTGM and APTM

    1. 性能测试过程模型(PTGM) PTGM模型包括以下几个步骤: 测试前期的准备 测试工具的引入 测试计划 测试设计与开发 测试执行与管理 测试分析 测试前期准备:主要任务为保证系统稳定和建立合适的 ...