实用的JavaScript验证码生成代码
javaScript简单验证代码（用户名，密码，邮箱）
javaScript简单验证代码（⽤户名，密码，邮箱）复制代码代码如下:<script language="javascript">function IsDigit(cCheck){return (('0'<=cCheck) && (cCheck<='9'));}function IsAlpha(cCheck){return ((('a'<=cCheck) && (cCheck<='z')) || (('A'<=cCheck) && (cCheck<='Z')))}function IsaNull(cCheck){return(cCheck != " ")}function checkform(){id = document.sform1.id.value;if (id == ""){alert("请输⼊注册名");document.sform1.id.focus();return false;}for (nIndex=0; nIndex<id.length; nIndex++){cCheck = id.charAt(nIndex);if (!(IsDigit(cCheck) || IsAlpha(cCheck) || cCheck=='-' || cCheck=='_' || cCheck=='.')){alert("⽤户名只能使⽤字母、数字以及-、_和.，并且不能使⽤中⽂");document.sform1.id.focus();return false;}}chineseid = document.sform1.chineseid.value;if (chineseid == ""){alert("请输⼊中⽂昵称");document.sform1.chineseid.focus();return false;}password = document.sform1.password.value;if (password == ""){alert("请输⼊登陆密码");document.sform1.password.focus();return false;}password1 = document.sform1.password1.value;if (password>password1){alert("重复密码与登陆密码不相同");document.sform1.password.focus();document.sform1.password1.focus();return false;}if (password<password1){alert("重复密码与登陆密码不相同");document.sform1.password.focus(); document.sform1.password1.focus();return false;}if (document.sform1.email.value == ""){alert("请输⼊您的E-MAIL地址"); document.sform1.email.focus();return false;}email=document.sform1.email.value; emailerr=0for (i=0; i<email.length; i++){if ((email.charAt(i) == "@") & (email.length > 5)) {emailerr=emailerr+1}}if (emailerr != 1){alert("请输⼊正确的E-MAIL地址"); document.sform1.email.focus();return false;}if (document.sform1.checkask.value==""){alert("密码提⽰问题不能为空"); document.sform1.checkask.focus();return false;}if (document.sform1.checkans.value=="") {alert("您的密码提⽰问题答案不能为空"); document.sform1.checkans.focus();return false;}return true;}</script>。
JavaScript生成图形验证码
JavaScript⽣成图形验证码本⽂实例为⼤家分享了js⽣成图形验证码的具体代码，供⼤家参考，具体内容如下getGVerify:function (id){function GVerify(options) { //创建⼀个图形验证码对象，接收options对象为参数this.options = { //默认options参数值id: "", //容器IdcanvasId: "verifyCanvas", //canvas的IDwidth: "100", //默认canvas宽度height: "30", //默认canvas⾼度type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母code: ""}if(Object.prototype.toString.call(options) == "[object Object]"){//判断传⼊参数类型for(var i in options) { //根据传⼊的参数，修改默认参数值this.options[i] = options[i];}}else{this.options.id = options;}this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");this.options.letterArr = getAllLetter();this._init();this.refresh();}GVerify.prototype = {/**版本号**/version: '1.0.0',/**初始化⽅法**/_init: function() {var con = document.getElementById(this.options.id);var canvas = document.createElement("canvas");/*this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";*/canvas.id = this.options.canvasId;canvas.width = this.options.width;canvas.height = this.options.height;canvas.style.cursor = "pointer";canvas.innerHTML = "您的浏览器版本不⽀持canvas";con.appendChild(canvas);var parent = this;canvas.onclick = function(){parent.refresh();}},/**⽣成验证码**/refresh: function() {this.options.code = '';var canvas = document.getElementById(this.options.canvasId);if(canvas.getContext) {var ctx = canvas.getContext('2d');}ctx.textBaseline = "middle";ctx.fillStyle = randomColor(180, 240);ctx.fillRect(0, 0, this.options.width, this.options.height);if(this.options.type == "blend") { //判断验证码类型var txtArr = this.options.numArr.concat(this.options.letterArr);} else if(this.options.type == "number") {var txtArr = this.options.numArr;} else {var txtArr = this.options.letterArr;}for(var i = 1; i <= 4; i++) {var txt = txtArr[randomNum(0, txtArr.length)];this.options.code += txt;ctx.font = '20px SimHei';//ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机⽣成字体⼤⼩ctx.fillStyle = randomColor(50, 160); //随机⽣成字体颜⾊/* ctx.shadowOffsetX = randomNum(-3, 3);ctx.shadowOffsetY = randomNum(-3, 3);*/ctx.shadowBlur = randomNum(-3, 3);ctx.shadowColor = "rgba(0, 0, 0, 0.3)";var x = this.options.width / 5 * i;var y = this.options.height / 2;var deg = randomNum(-30, 30);/**设置旋转⾓度和坐标原点**/ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 0, 0);/**恢复旋转⾓度和坐标原点**/ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/**绘制⼲扰线**/for(var i = 0; i < 4; i++) {ctx.strokeStyle = randomColor(40, 180);ctx.beginPath();ctx.moveTo(randomNum(0, this.options.width/2), randomNum(0, this.options.height/2));ctx.lineTo(randomNum(0, this.options.width/2), randomNum(0, this.options.height));ctx.stroke();}/**绘制⼲扰点**/for(var i = 0; i < this.options.width/4; i++) {ctx.fillStyle = randomColor(0, 255);ctx.beginPath();ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);ctx.fill();}},/**验证验证码**/validate: function(code){var verifyCode = code.toLowerCase();var v_code = this.options.code.toLowerCase();if(verifyCode == v_code){return true;}else{return false;}}}/**⽣成字母数组**/function getAllLetter() {var letterStr = "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,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"; return letterStr.split(",");}/**⽣成⼀个随机数**/function randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}/**⽣成⼀个随机⾊**/function randomColor(min, max) {var r = randomNum(min, max);var g = randomNum(min, max);var b = randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";}return new GVerify(id);}调⽤⽅法var verifyCode = new GVerify(id);验证⽅法if(verifyCode.validate(inputCode)){return true;}esle{return false;}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
javascript原生实现数字字母混合验证码
javascript原⽣实现数字字母混合验证码实现4位数数字字母混合验证码(数字+⼤写字母+⼩写字母)ASCII 字符集中得到3个范围： 1. 48-57 表⽰数字0-9 2. 65-90 表⽰⼤写字母 3. 97-122 表⽰⼩写字母范围随机数：parseInt(Math.random()*4); //此时Math.random意为“⼤于等于0，⼩于4”，取整后为0~3// 如何把最⼩值变成1呢？ +1就变成了1parseInt(Math.random()*4)+1; // +1后范围变成了“⼤于等于1，⼩于5”，parseInt取整后范围是1~4// 如果想获取50-100的范围随机数 min ~ maxmin + parseInt(Math.random()*(max - min + 1)); //+1后Math.random取值为⼤于等于0，⼩于51// min + 0 ~ 50 = 50~100具体实现如下：1 <script>2// 获取随机数的范围3function getRandomInt (min , max){4return min + parseInt(Math.random() * (max - min + 1))5 }6// 获取验证码7function getStringValidate(){8var res = "";9var min , max;10// 循坏代码进⾏拼接11for(var i = 0; i < 4; i++){12// 选择范围 1,2,313// 决定范围的开头和结尾14switch(getRandomInt(1 , 3)){15// 1是数字16case 1 :17 min = 48; max = 57;18break;19// 2是⼤写字母20case 2 :21 min = 65; max = 90;22break;23// 3是⼩写字母24case 3 :25 min = 97; max = 122;26break;27 }28// console.log(min , max);//随机范围29var randomInt = getRandomInt(min , max);30// var randomString = String.fromCharCode(randomInt);31// console.log(randomString);//⼀个随机字符经过上⾯的4次循环，⽣成4个随机数32// 拼接起来33 res += String.fromCharCode(randomInt);34 }35// console.log(randomString);//经过上⾯的4次循环，⽣成4个随机数36 console.log(res);37return res;38 }39 getStringValidate();40 </script>。
js验证手机号、密码、短信验证码代码工具类
js验证⼿机号、密码、短信验证码代码⼯具类本⽂实例为⼤家分享了js验证⼿机号、密码、短信验证码的代码⼯具类，供⼤家参考，具体内容如下代码⼯具类/*** 参数较验** */var verification = {stop : false, //倒计时//验证⼿机号phone : function (tel, id) {if ("" == tel || !tel) {mui.toast('⼿机号不可以为空!');} else {var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;//验证规则if (reg.test(tel)) return true;mui.toast("⼿机号错误!");}document.getElementById(id).focus();return false;},//验证密码(密码只能由数字和字母组成)password : function (w, id) {if ("" == w || !w) {mui.toast('请输⼊密码!');} else if (w.length < 6) {mui.toast('密码⾄少⼤于等于6位!');} else if (w.length > 20) {mui.toast('密码不能超过20位!');} else if (w) {var reg = /^[0-9a-zA-Z]+$/;if (reg.test(w)) return true;mui.toast("密码只能由数字和字母组成");}document.getElementById(id).focus();return false;},//验证码倒计时code : function (tel, btn, type) {var that = this,tel = $.trim(tel);if (!this.phone(tel, 'userTel')) return false;if (true == that.stop) return false; //防⽌重复点击that.stop = true;var btn = $("#"+btn);btn.attr("disabled", true).text("正在发送");var _no = 60;var time = setInterval(function () {_no--;btn.text(_no + "秒后重发");if (_no == 0) {//btn.attr("disabled", false).text("获取验证码");btn.removeAttr('disabled').text("重新获取验证码");that.stop = false;_no = 60;clearInterval(time);}}, 1000);var url = "/Home/User/sendVerifyCode.html";$.post(url, {toNumber: tel,type:type}, function (result) {mui.toast();if (200 != result.status) {btn.removeAttr('disabled').text("获取验证码");that.stop = false;_no = 60;clearInterval(time);}}, 'json');}};以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
js实现验证码案例
js 实现验证码案例本⽂实例为⼤家分享了js 实现验证码的具体代码，供⼤家参考，具体内容如下css 代码：1234567891011121314151617input{ width: 200px; height: 32px;border: 1px solid #000;box-sizing: border-box;}#c1{ vertical-align: middle; box-sizing: border-box;cursor: pointer;}#btn{ display: block; margin-top: 20px;height: 32px;font-size: 16px;}HTML 代码：12345<div class="code"> <input type="text" value="" id="inputValue" placeholder="请输⼊验证码（不区分⼤⼩写）"> <canvas id="c1" width="100" height="30" style="border:1px solid black"></canvas> <br><button id="btn">提交</button></div>js 代码：使⽤了部分jQuery 的⽅法，请记得先引⼊jQuery12345678910111213141516$(function(){// 存放随机的验证码 var showNum = [] draw(showNum) $("#c1").click(function(){draw(showNum)})$("#btn").click(function(){ var s = $("#inputValue").val().toLowerCase() var s1 = showNum.join("")17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 if(s==s1) {alert("提交成功")}else{alert("验证码错误")}draw(showNum)})// 封装⼀个把随机验证码放在画布上function draw(showNum){// 获取canvasvar canvas = $("#c1")var ctx = canvas[0].getContext("2d")// 获取画布的宽⾼var canvas_width = canvas.width()var canvas_height = canvas.height()// 清空之前绘制的内容// 0,0清空的起始坐标// 矩形的宽⾼ctx.clearRect(0,0,canvas_width,canvas_height)// 开始绘制var scode = "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,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,1,2,3,4,5,6,7,8,9," var arrCode = scode.split(",")var arrLength = arrCode.lengthfor(var i = 0;i<4;i++){var index = Math.floor(Math.random()*arrCode.length)var txt = arrCode[index]//随机⼀个字符showNum[i] = txt.toLowerCase()//转化为⼩写存⼊验证码数组// 开始控制字符的绘制位置var x = 10 +20*i //每⼀个验证码绘制的起始点x坐标var y = 20 + Math.random()*8// 起始点y坐标ctx.font = "bold 20px 微软雅⿊"// 开始旋转字符var deg = Math.random*-0.5// canvas 要实现绘制内容具有倾斜的效果，必须先平移，⽬的是把旋转点移动到绘制内容的地⽅ctx.translate(x,y)ctx.rotate(deg)// 设置绘制的随机颜⾊ctx.fillStyle = randomColor()ctx.fillText(txt,0,0)// 把canvas复原ctx.rotate(-deg)ctx.translate(-x,-y)}for(var i = 0;i<30;i++){if(i<5) {// 绘制线ctx.strokeStyle = randomColor()ctx.beginPath()ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height)ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height)ctx.stroke()}// 绘制点ctx.strokeStyle = randomColor()ctx.beginPath()var x = Math.random()*canvas_widthvar y = Math.random()*canvas_heightctx.moveTo(x,y)ctx.lineTo(x+1,y+1)ctx.stroke()}}7980818283848586878889909192// 随机颜⾊function randomColor(){var r = Math.floor(Math.random()*256) var g = Math.floor(Math.random()*256) var b = Math.floor(Math.random()*256) return `rgb(${r},${g},${b})`}})随便写的案例，有错误还请⼤家多多指教以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
js 6位验证码 验证函数
主题：js 6位验证码验证函数内容：随着互联网的发展，验证码在我们的生活中扮演着越来越重要的角色。
在全球信息站注册、登入、找回密码等流程中，验证码的作用是不可替代的。
其中，6位验证码是一种常见的形式，它通常用于验证用户的身份，保护用户信息的安全。
在实际开发中，我们经常需要编写js代码来实现这一功能。
本文将介绍如何使用js编写一个简单的6位验证码验证函数。
一、生成6位随机验证码在编写验证码验证函数之前，我们首先需要生成一个6位的随机验证码。
在js中，我们可以借助Math.random()方法来生成随机数，并通过一定的处理得到6位验证码。
以下是一种常见的实现方式：```javascriptfunction generateCode() {var code = '';for (var i = 0; i < 6; i++) {code += Math.floor(Math.random() * 10);}return code;}```上面的代码定义了一个generateCode函数，该函数内部通过循环生成了6位随机数字，并将其拼接成一个字符串，最终返回生成的验证码。
调用generateCode()函数即可获取一个6位随机验证码。
二、编写验证码验证函数有了生成6位随机验证码的基础，接下来我们来编写验证码验证函数。
验证码验证函数的作用是判断用户输入的验证码是否与生成的验证码一致。
下面是一个简单的验证码验证函数的实现：```javascriptfunction validateCode(input, code) {if (input === code) {return true;} else {return false;}}```上面的代码定义了一个validateCode函数，该函数接受两个参数，分别是用户输入的验证码和生成的验证码。
函数内部通过比较这两个值的大小，如果相等则返回true，否则返回false。
JavaScript实现4位随机验证码的生成
JavaScript实现4位随机验证码的⽣成本⽂实例为⼤家分享了JavaScript⽣成4位随机验证码的具体代码，供⼤家参考，具体内容如下代码：<!doctype html><html><head><meta charset="utf-8"><title>4位随机验证码的⽣成</title><style>label{color:aqua;float:left;font-size: 20px;line-height:2em;}#tex{display:inline-block;width:50px;height: 25px;float:left;text-align: center;font-size:15px;margin-top:10px;}#showyz{border:3px solid green;color:blue;width:90px;height:40px;text-align:center;float:left;margin-left:15px;line-height: 2.5em;}#hyz{background-color:burlywood;border:1px solid burlywood;width:50px;height:20px;float: left;margin-left:20px;margin-top: 10px;margin-right:15px;}#btn{}</style></head><body><label for="tex">请输⼊验证码：</label><input type="text" id="tex" maxlength="4" autofocus><div id="showyz"></div><div id="hyz">换⼀张</div><br><input type="button" id="btn" value="确认"></body><script>//定义个空数组保存62个编码var codes=[];//将数字对应的编码保存到codes数组中，数字编码范围【48-57】for(var i=48;i<=57;i++){codes.push(i);}//将⼤写字母对应的编码保存到codes数组中，对应编码范围【65-90】for(var i=65;i<=90;i++){codes.push(i);}//将⼩写字母对应的编码保存到codes数组中，对应编码范围【97-122】for(var i=97;i<=122;i++){codes.push(i);}//定义个⽅法⽣成62位随机数作为数组⾓标返回随机的编码，再将其编码转化为对应数字或者字母function suiji(){var arr=[];//定义个数组保存4位随机数for(var i=0;i<4;i++){var index=Math.floor(Math.random()*(61-0+1)+0);//⽣成个随机数var char=String.fromCharCode(codes[index]);//解码arr.push(char); //存⼊到数组arr中}return arr.join("");//将数组转为字符串，以空格分隔，并返回}var yzm=suiji();//调⽤⽅法，将放回的验证码返回到yzm中//获取上述元素var tex=document.getElementById("tex");var showyz=document.getElementById("showyz");var hyz=document.getElementById("hyz");var btn=document.getElementById("btn");//将验证码写⼊到id为showyz的div中showyz.innerHTML=yzm;//实现换⼀张验证码功能hyz.οnclick=function(){yzm=suiji();showyz.innerHTML=yzm;}//将⾃⼰输⼊的验证码与获取的随机验证码验证btn.οnclick=function(){var textvalue=tex.value;//获取输⼊的值if(textvalue.toLowerCase()==yzm.toLowerCase()){//将值都转为⼩写⽐较alert("验证码输⼊正确！");yzm=suiji();showyz.innerHTML=yzm;tex.value="";}else{alert("验证码输⼊错误，请重新输⼊！");yzm=suiji();showyz.innerHTML=yzm;tex.value="";}}</script></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JavaScript编写随机四位数验证码（大小写字母和数字）
JavaScript编写随机四位数验证码（⼤⼩写字母和数字）1、JavaScript编写随机四位数验证码，⽤到的知识点为： a、Math对象的随机数：Math.random()b、Math对象的取整：Math.floor() c、处理所需要的下标个数，结合以上两个Math对象。
2、⾸先，来做⼏道简单的结果输出。
a、Math.random()*100； b、Math.floor(Math.random()*100)； c、Math.floor(Math.random()*100)%16； 相信⼤家前两道题很容易就能够做对。
结果分别是 a、0-100之间的随机浮点数。
b、0-100之间的随机整数。
那么第三道题⽆⾮就是 0-100之间的随机整数对16取余数，将会是⼀个什么区间呢？ 在这⾥我告诉⼤家⼀个⽅法： 任何数字对某⼀个数字取余数，那么最⼩的余数应该是 0 本⾝，那么最⼤的余数应该是什么呢？答案当然是⽐他⼩ 1 。
以这道题为例：100%16 最⼤的余数当然是 15 ，因为余数如果是16 的话他将被整除，最终余数为0.3、说了这么多⼩问题，基础题，我们学会了这些能够做什么呢？ 本篇⽂章为⼤家编写⼀个随机验证码（4位数⼤⼩写字母数字组成）实现随机变换颜⾊，随机变换字号⼤⼩，随机抽取字母数字。
/*1、随机的颜⾊，随机的字号，随机的字母数字。
颜⾊由：0-9的数字，a-f的字母组成。
字号：以html标记font的属性1-7组成。
字母数字：⼩写26个字母，⼤写26个字母，0-9 的数字组成。
2、创建三个数组，数组元素为以上三组。
3、4位数验证码，需要使⽤循环遍历，条件是4次。
每次在这个循环中，我需要产⽣随机颜⾊数组长度的下标、随机字号数组颜⾊的下标、随机抽取字母⼤⼩写，数字样本数组的下标。
4、拼接字符串，每次⽣成⼀个font元素， color="颜⾊数组[随机下标]" size = "字号数组[随机下标]" 内容为：字母数字样本[随机下标]5、输出随机字符串*/<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>4位字母验证码</title><script type="text/javascript">function checkCodeofRandom(){// 所需随机抽取的样本数组var nums=new Array("q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m","A","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M","0","1","2","3","4","5","6 // 初始化拼接字符串var str="";//颜⾊需要的数组元素var nums1=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");var n1="";//字号需要的数组元素var nums2=new Array("1","2","3","4","5","6","7");var n2;for(i=0;i<4;i++){//遍历拼接颜⾊⾊值 eg 000000for(var j=0;j<6;j++){var k=Math.floor(Math.random()*100)%16;n1=n1+nums1[k];}//每次⽣成⼀个随机的字号var o=Math.floor(Math.random()*100)%8;n2=nums2[o];//每次⽣成⼀个0 - 61 之间的 number 作为随机获取验证码的下标var p=Math.floor(Math.random()*1000)%62;//拼接验证码随机颜⾊随机字号随机抽取⼤⼩写字母和数字str+="<font color='#"+n1+"' size='"+n2+"'>"+nums[p]+"</font>"}document.getElementById("checkCode").innerHTML = str;}</script></head><body><div id = 'checkCode' style="width:100px; float: left; "></div><button id = "btn" onclick="checkCodeofRandom()">获取验证码</button></body></html>本博客是博主⾃⼰研究，编写的随机验证码，请深⼊理解其随机思想。
js实现验证码功能
js实现验证码功能本⽂实例为⼤家分享了js实现验证码功能的具体代码，供⼤家参考，具体内容如下#前⾯是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后⾯⾸先在页⾯中准备⼀个输⼊框，⼀个显⽰验证码的盒⼦和⼀个提交按钮<body><input type="text"><div></div><button>提交</button></body>然后加⼀些样式input {width: 150px;height: 30px;outline: none;font-size: 24px;vertical-align: middle;}button {outline: none;vertical-align: middle;cursor: pointer;}div {display: inline-block;width: 90px;height: 40px;line-height: 40px;text-align: center;vertical-align: middle;background-color: #ddd;cursor: pointer;}然后⼤概长这样（有点丑，不过⽆所谓，主要内容是js）好，那么开始写js⾸先获取这些元素var input = document.querySelector('input');var btn = document.querySelector('button');var div = document.querySelector('div');然后搞⼀个字符库和⼀个保存验证码的字符串var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";var str;那个字符库就直接滚键盘就⾏了~因为验证码要多次⽤到随机数，所以为了⽅便就先搞⼀个随机数的函数function getRandom(l, r) {return parseInt(l + Math.random() * (r - l + 1));}因为是验证码，所以不能让⽣成的⽂本可以直接被选中复制，所以给加⼀个⽂本不可选中div.addEventListener('selectstart', function (e) {e.preventDefault();})因为验证码不是每次刷新页⾯就⽣成⼀次，看不清是可以换的，要多次⽣成，所以就把⽣成验证码的部分写在⼀个函数⾥function run() {str = '';while (div.hasChildNodes()) {div.removeChild(div.firstChild);}for (var i = 0; i < 4; i++) {var span = document.createElement('span');span.innerHTML = characters[getRandom(0, characters.length - 1)];span.style.display = 'inline-block';span.style.fontSize = getRandom(16, 32) + 'px';span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';str += span.innerHTML;div.appendChild(span);}}⼤概说明⼀下这部分，原理⼤概就是创建4（我搞的是4位的验证码）个span，然后分别随机设置⽂本、字体⼤⼩、字体颜⾊、平移旋转啥的，然后把span添加到div⾥成为div的⼦节点，然后不要忘了让str变量储存⼀下验证码的字符每次⽣成之前先将上⼀次⽣成的验证码删掉（即把div⾥的所有⼦节点删除掉），并且把str重置然后页⾯刷新的时候⽣成⼀次（调⽤⼀次），每次点击div的时候重新⽣成⼀次（每次点击调⽤⼀次）run();div.addEventListener('click', run);再给提交按钮添加点击事件：判断验证输⼊的验证码对不对，然后刷新验证码，并且⾃动将输⼊框中的⽂本清除btn.addEventListener('click', function () {if (input.value.toLowerCase() == str.toLowerCase()) {alert('验证成功');} else {alert('验证失败');}run();input.value = '';})判断验证码这⾥我为了不区分⼤⼩写⽤了toLowerCase()函数将两个字符串都转化成⼩写之后再做的⽐较⾄此，功能就都实现的差不多了看效果：带注释的完整版代码如下：<!DOCTYPE html><html lang="ch-ZN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js实现验证码</title><style>input {width: 150px;height: 30px;outline: none;font-size: 24px;vertical-align: middle;}button {outline: none;vertical-align: middle;cursor: pointer;}div {display: inline-block;width: 90px;height: 40px;line-height: 40px;text-align: center;vertical-align: middle;background-color: #ddd;cursor: pointer;}</style></head><body><input type="text"><div></div><button>提交</button><script>// 获取元素var input = document.querySelector('input');var btn = document.querySelector('button');var div = document.querySelector('div');// 搞⼀个字符库var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890"; var str; // str⽤来储存验证码的⽂本// ⽣成⼀个在[l,r]范围内的随机整数的函数function getRandom(l, r) {return parseInt(l + Math.random() * (r - l + 1));}// 设置⽂本不可选中div.addEventListener('selectstart', function (e) {e.preventDefault();})// ⽣成验证码的函数function run() {// 先重置strstr = '';// 删除掉div中的所有⼦节点while (div.hasChildNodes()) {div.removeChild(div.firstChild);}// ⽣成由四个字符组成的验证码for (var i = 0; i < 4; i++) {// 创建⼀个span对象var span = document.createElement('span');// 设置⽂本（从字库中随机抽取⼀个字符）span.innerHTML = characters[getRandom(0, characters.length - 1)];// 设置⼀些随机的样式span.style.display = 'inline-block';span.style.fontSize = getRandom(16, 32) + 'px';span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)'; str += span.innerHTML; // str记录字符div.appendChild(span); // 将span添加到div中}}run(); // 每次打开/刷新页⾯时先调⽤⼀次div.addEventListener('click', run); // 每次点击验证码的时候调⽤⼀次// 提交按钮点击事件btn.addEventListener('click', function () {if (input.value.toLowerCase() == str.toLowerCase()) {alert('验证成功');} else {alert('验证失败');}run();input.value = '';})</script></body></html>以上以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JavaScript实现滑块验证码
JavaScript实现滑块验证码本⽂实例为⼤家分享了JavaScript实现滑块验证码的具体代码，供⼤家参考，具体内容如下效果：⿏标在底部滑块上按下按住不松拖动可以移动滑块，上⾯⼤图⾥⾯带有⼩图背景的滑块也会跟随移动，移动到⼤图背景缺少区域即可完成验证。
以上效果要实现，需要⿏标按下（mousedown事件），⿏标松开（mouseup事件），⿏标移动（mousemove事件）这⼏个事件。
先制作html部分实现静态效果，⼤图⾥⾯可移动的⼩块背景⼤⼩与⼤图⼀致，给⼩图块的背景添加background-position属性来控制⼩图要显⽰的图⽚区域HTML：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{background: #34495e;}.wrap{width: 600px;margin: 100px auto;}.banner{width: 600px;height: 400px;background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);background-size: 600px 400px;position: relative;}.blank-box{position: absolute;top: 100px;left: 200px;width: 50px;height: 50px;background: #fff;}.block{position: absolute;top: 100px;left: 0;width: 50px;height: 50px;background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);background-size:600px 400px;background-position:-200px -100px;border: 1px solid red;}.move{position: relative;}.move p{height: 50px;line-height: 50px;font-size: 16px;color: #666;background: #eee;text-align: center;}.move-block{position: absolute;left: 0;top: 0;width: 50px;height: 50px;background:#1abc9c;cursor: pointer;}</style></head><body><div class="wrap"><div class="banner"><div class="blank-box"></div><div class="block"></div></div><div class="move"><p>移动滑块>>></p><div class="move-block"></div></div></div></body></html>JS部分：获取需要的dom元素，⿏标在底部滑块上按下时，才能移动，所以在这个滑块上绑定⼀个⿏标按下事件，在这个事件⾥通过event这个对象获取⿏标的坐标点并减去⼩块的偏移量来获取滑块移动的偏差值（⿏标的坐标点减去这个偏差值才是真实移动的距离），移动状态变为可滑动。
使用JavaScript随机生成数字混合字母的验证码
使⽤JavaScript随机⽣成数字混合字母的验证码<script>// 封装⼀个随机⽣成数字的函数function random(a, b) {var n = Math.round(Math.random() * (a - b) + b);return n;}//=====================================有漏洞版=============================================function getCode(){//定义⼀个字符串把所有可能都装进去，全部字母以及数字var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//声明⼀个空的字符串，⽤作装随机⽣成的四个数。
var str = "";//写⼀个循环⽤来重复随机⽣成⼏个数，以及将东西⼀个⼀个放进上⾯声明的空字符串内for (var i = 0; i < 4; i++) {var m = random(0,61);str += codeStr.charAt(m);}// 在外⾯调⽤函数时，⼀定要在函数内写返回值return str;}//调⽤函数console.log(getCode());//====================================更为严谨版==============================================//运⾏⼀下上⾯的代码我们会发现，字母出现的⼏率远远⼤过数字出现的⼏率。
这是因为codeStr⾥⾯的字母有52个，// 数字却只有10个，⽽这样并不能算是真正的随机。
故我补充了下⾯的代码。
//思路：做⼀个随机⽣成数的库strData，循环四次，每次都会产⽣⼤写字母、⼩写字母、数字各三个，也就是说strData // ⾥⾯放了12个数。
JavaScript实现随机生成验证码及校验
JavaScript实现随机⽣成验证码及校验本⽂实例为⼤家分享了JavaScript实现随机⽣成验证码及校验的具体代码，供⼤家参考，具体内容如下输⼊验证码（区分⼤⼩写）点击确认，进⾏校验。
出错就弹框提⽰点击看不清重新随机⽣成验证码当验证码输⼊错误时进⾏提⽰<body><div class="v_code"><div class="code_show"><span class="code" id="checkCode"></span><a href="#" id="linkbt">看不清，换⼀张</a></div><div class="input_code"><label for="inputCode">验证码：</label><input type="text" id="inputCode"><span id="text_show"></span></div><input type="button" id="Button1" value="确认"></div><script>// 1.⽣成验证码// 6位数 0-9 a-f 随机⽣成6位内容必须是0-9 a-f 字符串// 数组下标 0、1、2…… 从数组当中随机下标 0-15位// 2.进⾏验证点击确认时，进⾏对⽐window.onload = function() {const randomWord = () => {let code = '';for (var i = 0; i < 6; i++) {var type = getRandom(1,3);switch(type) {case 1:code += String.fromCharCode(getRandom(48,57)) // 数字break;case 2:code += String.fromCharCode(getRandom(65,90)); //⼤写字母break;case 3:code += String.fromCharCode(getRandom(97,122)); //⼩写字母break;}}return code;}function getRandom (min, max) {return Math.round(Math.random()*(max-min)+min)}// 调⽤取数函数const rand = randomWord();//console.log(rand);var checkCode = document.getElementById('checkCode');checkCode.innerText = rand;// 点击切换随机数var linkbt = document.getElementById('linkbt');linkbt.addEventListener('click', function() {checkCode.innerText = randomWord();})// 提交进⾏对⽐document.getElementById('Button1').onclick = function() {var inputCode = document.querySelector('#inputCode');if (inputCode.value != checkCode.innerText) {alert('您输⼊的验证码不正确');inputCode.value = '';return false;} else {alert('输⼊正确');}}}</script></body>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JavaScript实现页面动态验证码的实现示例
JavaScript实现页⾯动态验证码的实现⽰例引⾔：现在很多在⽤户登陆或注册的时候为了防⽌程序攻击，加⼊了动态验证的技术，⼀般是让⽤户输⼊随即⽣成的验证码来实现。
我⾃⼰写了⼀个没有跟后台交互的，就在前端验证，发出来给⼤家看看。
效果图：实现思路：把数字和字母放到⼀个数组中，通过随机的⽅式取得数组下标，总共取4个组成验证码；把验证码渲染出来（⼀个⼀个的渲染）；绘制⼀定数量的⼲扰线，随机颜⾊；输⼊验证码，输⼊4位以后去验证，正确显⽰钩，错误显⽰叉并且刷新验证码。
编写构造函数⽂本构造函数//⽂字的构造函数function Text(o){this.x=0,//x坐标this.y=0,//y坐标this.text='',//内容this.font=null;//字体this.textAlign=null;//对齐⽅式this.init(o);}Text.prototype.init=function(o){for(var key in o){this[key]=o[key];}}Text.prototype.render=function(context){this.ctx=context;innerRender(this);function innerRender(obj){var ctx=obj.ctx;ctx.save()ctx.beginPath();ctx.translate(obj.x,obj.y);if(obj.font){ctx.font=obj.font;}if(obj.textAlign){ctx.textAlign=obj.textAlign;}if(obj.fill){//是否填充obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;ctx.fillText(obj.text,0,0);}ctx.restore();}return this;}线段构造函数//直线的构造function Line(ctx,o){this.x=0,//x坐标this.y=0,//y坐标this.startX=0,//开始点x位置this.startY=0, //开始点y位置this.endX=0,//结束点x位置this.endY=0;//结束点y位置this.thin=false;//设置变细系数this.ctx=ctx;this.init(o);}Line.prototype.init=function(o){for(var key in o){this[key]=o[key];}}Line.prototype.render=function(){innerRender(this);function innerRender(obj){var ctx=obj.ctx;ctx.save()ctx.beginPath();ctx.translate(obj.x,obj.y);if(obj.thin){ctx.translate(0.5,0.5);}if(obj.lineWidth){//设定线宽ctx.lineWidth=obj.lineWidth;if(obj.strokeStyle){ctx.strokeStyle=obj.strokeStyle;}//划线ctx.moveTo(obj.startX, obj.startY);ctx.lineTo(obj.endX, obj.endY);ctx.stroke();ctx.restore();}return this;}按长度获取验证码//根据指定长度⽣成随机字母数字Verifiable.prototype.randomWord=function(range){var str = "",pos,arr = ['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', '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<range; i++){pos = Math.round(Math.random() * (arr.length-1));str += arr[pos];}return str;}绘制⽂字//绘制⽂字Verifiable.prototype.drawText=function(){var that=this;var count = 4;//⽂字个数var textW = 40;//⽂字所占宽var code=this.code = this.randomWord(count);var codeArr = code.split("");var text,x ;codeArr.forEach(function(c,i){x = that.w/count*i+textW/2;//绘制⽂字text = new Text({x:x,y:textW-10,text:c,font:'30px ans-serif',textAlign:'center',fill:true,fillStyle:'#412D6A'});that.renderArr.push(text);})}此时效果：绘制⼲扰线//绘制⼲扰线Verifiable.prototype.interfering=function(){var count = this.lineCount=20,line,ctx=this.ctx;var startX,startY,endX,endY,color;for(var i=0;i<count;i++){//随机开始坐标，结束坐标、颜⾊startX = _.getRandom(0,140);startY = _.getRandom(0,40);endX = _.getRandom(0,140);endY = _.getRandom(0,40);color = _.getRandomColor();//定义⼀条直线line = new Line(ctx,{x:0,y:0,startX:startX,startY:startY,endX:endX,endY:endY,strokeStyle:color})this.renderArr.push(line);}}此时效果如下：加⼊页⾯布局<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>verifiable</title><style>width:140px;height:40px;position:absolute;}#inputDiv{width:220px;position:absolute;margin:0 auto;left:0;top:30px;right:0;bottom:0;}#container{width:220px;height:60px;position:absolute;margin:0 auto;left:0;top:60px;right:0;bottom:0;}.refresh{position:absolute;left:140px;}</style></head><body><div id='inputDiv'>验证码：<input size=10 id='codeInput'><img id='stateImg' style="vertical-align: middle;width:20px"></img></div><div id="container"><div id='box'></div><a href="javascript:void 0" class="refresh" onclick="refresh()">换⼀张</a></div></body><script type="text/javascript" src='verifiable.js'></script><script type="text/javascript">var box = document.getElementById('box');var stateImg = document.getElementById('stateImg');var codeInput = document.getElementById('codeInput');verifiable.init(box,codeInput,stateImg);//换⼀张function refresh(){verifiable.renderArr.length=0;verifiable.draw();}</script></html>加⼊输⼊框事件//输⼊框事件Verifiable.prototype.inputValid=function(input){var val = input.value;if(val.length<4) return ;if(this.code==val){console.log('suc');this.result(0);}else{this.result(1);}}加⼊成功、失败验证//处理结果Verifiable.prototype.result=function(result){var codeInput = this.codeInput;var stateImg = this.stateImg;if(result==0){//成功stateImg.src="./images/suc.jpeg";codeInput.readOnly=true;}else {//失败codeInput.readOnly=false;stateImg.src="./images/fail.jpeg";this.renderArr.length=0;this.draw();}}完成到此这篇关于JavaScript实现页⾯动态验证码的实现⽰例的⽂章就介绍到这了,更多相关JavaScript 动态验证码内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
JS验证码实现代码
JS验证码实现代码废话不多说了，直接给⼤家贴代码了，具体代码如下所⽰：<script language="javascript">var code; //在全局定义验证码function createCode(){ //创建验证码函数code = "";var codeLength =4;//验证码的长度var selectChar = 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 charIndex =Math.floor(Math.random()*36);code +=selectChar[charIndex];}// 设置验证码的显⽰样式，并显⽰document.getElementById("discode").style.fontFamily="Fixedsys"; //设置字体document.getElementById("discode").style.letterSpacing="5px"; //字体间距document.getElementById("discode").style.color="#0ab000"; //字体颜⾊document.getElementById("discode").innerHTML=code; // 显⽰}function but(){//验证验证码输⼊是否正确var val1=document.getElementById("t1").value;var val2=code;if(val1!=val2){alert("验证码错误!");document.getElementById('t1').value="";}}</script>验证码框<div class="input"><input id="t1" type="text" name="u" placeholder="验证码" onblur="but()" /><span id="discode"></span><input type="button" value="换⼀换" class="c" style="height:20px;"onClick="createCode()"></div>效果总结以上所述是⼩编给⼤家介绍的JS验证码实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
javascript发送短信验证码实现代码
javascript发送短信验证码实现代码本⽂⾸先分析⼿机发送验证码的原理，再对javascript发送短信验证码予以实现，具体思路如下：实现点击“发送验证码”按钮后，按钮依次显⽰为“59秒后重试”、“58秒后重试”…直⾄倒计时⾄0秒时再恢复显⽰为“发送验证码”。
在倒计时期间按钮为禁⽤状态 .第⼀步、获取按钮、绑定事件、设置定时器变量和计时变量第⼆步、添加定时器，每隔1秒钟计时减 1，直⾄当计时⼩于等于 0 时清除定时器，按钮恢复为“发送验证码”，否则显⽰为“X 秒后重试”效果图：实现代码：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">window.onload=function(){var send=document.getElementById('send'),times=60,timer=null;send.onclick=function(){// 计时开始var that = this;this.disabled=true;timer = setInterval(function(){times --;that.value = times + "秒后重试";if(times <= 0){that.disabled =false;that.value = "发送验证码";clearInterval(timer);times = 60;}//console.log(times);},1000);}}</script></head><body><input type="button" id="send" value="发送验证码"></body></html>注意点：设置按钮是否为禁⽤时，send.disabled=true; send.disabled=false;true和false不能加引号!true和false不能加引号!true和false 不能加引号!否则值永远为真。
JavaScript实现点击切换验证码及校验
JavaScript实现点击切换验证码及校验本⽂实例为⼤家分享了JavaScript实现点击切换验证码及校验的具体代码，供⼤家参考，具体内容如下效果：代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div {width: 100px;height: 40px;background-color: red;color: #fff;text-align: center;line-height: 40px;font-size: 30px;font-weight: 900;user-select: none;}.show {position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 200px;height: 100px;background-color: pink;text-align: center;line-height: 100px;font-size: 40px;font-weight: 900;display: none;}</style></head><body><div></div><input type="text" value="请输⼊上图的验证码" /><button>注册</button><div class="show">等待中。
</div><script type="text/javascript">//1000-9999var div = document.getElementsByTagName("div");var inp = document.getElementsByTagName("input")[0];var btn = document.getElementsByTagName("button")[0];div[0].innerHTML = ranFun(1000, 9999);inp.onclick = function () {this.value = ""}div[0].onclick = function () {this.innerHTML = ranFun(1000, 9999)}btn.onclick = function () {if (inp.value == div[0].innerHTML) {div[1].style.display = "block";setTimeout(function () {location.href = "register.html"}, 3000)} else {alert('验证码错误')div[0].innerHTML = ranFun(1000, 9999);inp.value = ""}}function ranFun(a, b) {return Math.floor(Math.random() * (b - a + 1) + a)}</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JS实现简单短信验证码界面
JS实现简单短信验证码界⾯1.要实现短信验证码界⾯，⾸先要有⼀个⽂本框，旁边是按钮，点击时开始倒计时。
2.先创建⽂本框和按钮，按钮设置对应的id，然后在js中通过id获取按钮这个元素，对其执⾏操作。
同时应设置倒计时时间以及计时器变量，并使点击发送按钮后倒计时结束前⽆法继续点击按钮重新发送。
3.倒计时结束后，清除计时器，并使⽂字改变为“重新发送验证码”，恢复对按钮能操作的功能，同时使倒计时的数从5秒重新开始以便点击后重新倒计时。
<head><meta charset="UTF-8"><title>js发送短信验证码</title></head><body><input type="text"/><button id="bt01">发送验证码</button></body><script type="text/javascript">var bt01 = document.getElementById("bt01");bt01.onclick = function() {bt01.disabled = true; //当点击后倒计时时候不能点击此按钮var time = 5; //倒计时5秒var timer = setInterval(fun1, 1000); //设置定时器function fun1() {time--;if(time>=0) {bt01.innerHTML = time + "s后重新发送";}else{bt01.innerHTML = "重新发送验证码";bt01.disabled = false; //倒计时结束能够重新点击发送的按钮clearTimeout(timer); //清除定时器time = 5; //设置循环重新开始条件}}}</script>总结以上所述是⼩编给⼤家介绍的JS实现简单短信验证码界⾯，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
JS生成数字加减乘法验证码
JS⽣成数字加减乘法验证码给⼤家分享⼀个简单的js验证码⽣成代码PS:该代码依赖Jquery1.4版本以上传⼊元素如productionVerificationCode(#("a")) 反回验证码的结果，#("a")元素写⼊验证码//----[⽣成数字加减乘法验证码](传⼊写⼊元素，返回验证码计算结果)function productionVerificationCode(element) {var code = 9999;var ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); //随机⽣成颜⾊// alert(ranColor)var ranColor2 = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);var num1 = Math.floor(Math.random() * 100);var num2 = Math.floor(Math.random() * 100);//随机算法var tmparith = Math.floor(Math.random() * 3);var $html = "";switch(tmparith) {case 1:code = num1 + num2;$html = num1 + ' + ' + num2 + ' = ?';break;case 2:if(parseInt(num1) < parseInt(num2)) {var tmpnum = num1;num1 = num2;num2 = tmpnum;}code = num1 - num2;$html = num1 + ' - ' + num2 + ' = ?';break;default:code = num1 * num2;$html = num1 + ' × ' + num2 + ' = ?';break;}element.val($html); //写⼊验证码if(element.hasClass("nocode")) {element.removeClass("nocode");element.addClass("code");}element.css('background', ranColor);element.css('color', ranColor2);return code;}//----[END][⽣成数字加减乘法验证码]Processing math: 100%。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml" > <head> <title>实用的 JavaScript 验证码生成代码-JAVA:</title> <style type="text/css"> .code { background-image:url(code.jpg); font-family:Arial; font-style:italic; color:Red; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; } .unchanged {border:0;} </style> <script language="javascript" type="text/javascript">
var code ; //在全局 定义验证码 function createCode() { code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); var selectChar = 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 charIndex = Math.floor(Math.random()*36); code +=selectChar[charIndex];
} if(checkCode) { checkCode.className="code"; checkCode.value = code; }
}
function validate () { var inputCode = document.getElementById("input1").value; if(inputCode.length <=0) { alert("请输入验证码！"); } else if(inputCode != code ) { alert("验证码输入错误！"); createCode();//刷新验证码 }
else { alert("^-^ OK"); }
}
</script> </head> <body onload="createCode()"> <form action="#"> <input type="text" id="input1" /> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br /> <input id="Button1" onclick="validate();" type="button" value="确定" /> </form> </body> </html>
。