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

checkCode.js

var code ; //在全局定义验证码
//产生验证码
window.onload = createCode;
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. js生成验证码并验证

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

  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. Error 25007.初始化合成时发生错误。安装程序无法使用 LoadLibraryShim() 加载合成。

    安装“Microsoft .NET Framework 2.exe”报错如下: c:\windows\microsoft.net\framework\...类似这种错误都因 .NET Framewor ...

  2. 【算法】MD5加密

    1.什么是MD5 MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法.哈希算法),主流编程语言普遍 ...

  3. 【java】详解java多线程

    目录结构: contents structure [+] 线程的创建与启动 继承Thread类创建线程类 实现Runnable接口创建线程类 使用Callable和Future创建线程 线程的生命周期 ...

  4. C#程序证书创建工具 (Makecert.exe)

    原文地址:https://msdn.microsoft.com/zh-cn/library/bfsktky3(VS.80).aspx 证书创建工具生成仅用于测试目的的 X.509 证书.它创建用于数字 ...

  5. Mac PATH你所需要了解的

    关于Mac环境变量你需要知道: 0.何为环境变量? 1.如何查看环境变量? 2.如何配置环境变量? 3.如何重置环境变量? 0.环境变量: 所谓环境变量,$PATH,应用于Linux,OS X,Uni ...

  6. emergency monitoring和real-time ADDM

    emergency monitoring面临的挑战: 1.sick systems 2.slow database -所有用户查询响应慢 -性能界面刷新数据慢 -吞吐量严重降低 3.因为内部资源竞争数 ...

  7. 解决Mac上adb: command not found问题

    使用mac进行开发的时候,有时候需要使用adb指令来进行一些操作,但是如果没有配置过Android环境变量,可能会出现adb: command not found的问题,查了一些资料,这里记录一下ma ...

  8. LIGHT OJ 1199 - Partitioning Game

    传送门 1199 - Partitioning Game    PDF (English) problem=1199" style="color:rgb(79,107,114)&q ...

  9. 不常用但很有用的git show 和 git blame

    团队使用git 合作时,可能遇见想要查看一段比较难以阅读代码, 此时可能需要联系最新的修改者是哪位,这时候最有用的最快捷的方法就是git blame 啦, 这个指令的output是一个文件的各个区域段 ...

  10. javascript解析JSON---将字符串转换为json对象

    <script type="text/javascript">       var str = '{"name":"jack", ...