JS自动生成动态HTML验证码页面

时间：2021-05-26

本文为大家分享了JS自动生成动态HTML验证码页面，输入错误自动清空输入框功能，供大家参考，具体内容如下

<!DOCTYPE html><html><head> <title>验证码</title><meta charset="utf-8" /><style type="text/css"> #code { font-family: Arial; font-style: italic; font-weight: bold; border: 0; letter-spacing: 2px; color: blue; }</style><script> //产生验证码 window.onload = function() { createCode() } var code; //在全局定义验证码 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("ctl00_txtcode").value.toUpperCase(); //获取输入框内验证码并转化为大写 if(inputCode.length <= 0) { //若输入的验证码长度为0 alert("请输入验证码！"); //则弹出请输入验证码 } else if(inputCode != code) { //若输入的验证码与产生的验证码不一致时 alert("验证码输入错误!"); //则弹出验证码输入错误 createCode(); //刷新验证码 document.getElementById("ctl00_txtcode").value = "";//清空文本框 } else { //输入正确时 alert("正在登陆"); //弹出 } }</script></head><body> <div> <!--时间：2017-01-11 描述：输入框ct100_textcode --> <input type="text" id="ctl00_txtcode" /> <!--时间：2017-01-11 描述：把验证码定义为按钮，点击刷新--> <input type="button" id="code" onclick="createCode()" /> <!--时间：2017-01-11 描述：验证按钮 --> <input type="button" value="验证" onclick="validate()" /> </div> </body</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章