JS实现动态HTML验证码及错误清空功能
作者:小圆点时间:2026-10-22 04:49:10浏览:340
本文介绍如何使用JavaScript在HTML页面中自动生成动态验证码,并实现输入错误时自动清空输入框的功能。代码包含完整的样式定义与脚本逻辑,可直接参考使用。
JS动态验证码实现方案
本文分享一个利用JavaScript自动生成动态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>
以上即为本文的全部内容,希望能为读者的学习提供一定帮助,同时也欢迎大家继续支持本站。
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
