<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. jquery-1.3.2.js

    Uncaught SyntaxError: Unexpected identifier

  2. eclipse或者myeclipse安装svn报错”unable to load default svn client”

    是svn版本低了的问题 subeclipse下载,直接百度site1.X                  X为你需要的版本 解压site1.X 将此窗口先放到一边 在eclipse的安装目录下的dr ...

  3. 循序渐进Python3（十）-- 3 -- SqlAlchemy

    使用sqlalchemy 创建外键关联 ), ), ) host_user = Column(String(), ), ), ]).first()for item in works.workinfo: ...

  4. 查linux端口连接情况用命令netstat

    查linux端口连接情况用命令netstat netstat -apn |grep cdnbest 或netstat –apn | grep 3320

  5. Sharif University CTF 2016 -- Android App

    很多种的方案: 方案 A: 直接逆向读代码方案 B: 解包,加入debug信息,重新打包,动态调试方案 C: 解包,改代码加入log.i整出flag, 去掉MainActivity里面d=什么也可以, ...

  6. 假装这些是MyEclipse的快捷键(1)

    Java快捷键 Alt + / 代码自动补全Alt + Shift + S 功能菜单 Ctrl + 1 代码自动修正Ctrl + / 单行注释/取消Ctrl + O 查看类的所有方法Ctrl + T ...

  7. 第一次将内容添加到azure event hubs

    由于每秒数据吞吐量巨大,需要将实时数据存到event hubs,再由event hubs定时定量保存到document DB. event hubs的介绍详见微软官页:https://azure.mi ...

  8. Oracle学习线路

    出自huyangg的博客,地址是:oracle学习路线图 1.sql.pl/sql(网上有很多的视频,可以做一个简单的入手,然后看几本书,多做实验)    作为oracle的基本功,需要大家对sql和 ...

  9. DFTX 笔试

    char aa[8] = "abcd"; printf("%d",strlen(aa));  4 printf("%d",sizeof(aa ...

  10. 自动生成查找组件的lua代码

    本篇主要解决的问题是使用lua脚本编写unity业务逻辑时,自动生成一些查找组件及绑定控件事件的lua代码! 现在很多unity项目都是用ulua作为热更新解决方案,因此需要用lua来写相关的逻辑,经 ...