2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > JQuery 实现随机生成 数字+字母 验证码

JQuery 实现随机生成 数字+字母 验证码

时间:2021-06-12 23:42:46

相关推荐

JQuery 实现随机生成 数字+字母 验证码

原文地址:/article/117132.htm

效果图

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!--验证码--><script language="javascript" type="text/javascript">var code;function createCode() { //函数体code = "";var codeLength = 5; //验证码的长度var checkCode = document.getElementById("checkCode");var codeChars = 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','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 charNum = Math.floor(Math.random() * 52);//设置随机产生code += codeChars[charNum];}if (checkCode){checkCode.className = "code";checkCode.innerHTML = code;}} </script></head><style>/*验证码*/.code{background-color: silver;font-family:Arial; /*设置字体*/font-style:initial;color:brown;font-size:20px;border:0;padding:2px 3px;letter-spacing:3px;font-weight:bolder; width:81px;height:23px;margin-left: 120px;margin-top: -35px;}a{text-decoration:none;font-size:12px;color:#288bc4;}a:hover{text-decoration:underline;}.yz{position: absolute;margin-left: 220px;margin-top:-10px;}</style><body onload="createCode()"><!--在页面加载的同时要加载验证码,否则页面加载完后验证码不会显示 --><p><label>验证码:</label> <div class="code" id="checkCode" onclick="createCode()" ></div><a class="yz" href="#" onclick="createCode()">看不清换一张</a></p><p><label>请输入验证码:</label><input id="YZ" name="yz" width="30px;"></p><input class="btttom" type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/></body><!--验证--><script>function GetDom(){if(document.getElementById("YZ").value==""){alert("验证码不能为空!");createCode();//输错一次或提交一次都将会刷新一次验证码return false; //结束本次会话}else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写alert("您输入的验证码有误,请重新输入!!");createCode();//读取文件} else{alert("ok");}} </script></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。