JavaScript实现随机生成验证码及校验
作者:小括号时间:2026-10-24 12:19:29浏览:451
本文介绍了使用JavaScript实现验证码随机生成与校验的具体方法。通过HTML构建界面,利用JS生成随机字符并显示,支持点击刷新,并对用户输入的验证码进行大小写敏感校验,错误时提示,正确时反馈。
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>
以上内容即为本文介绍的全部实现细节,希望能为读者的学习提供有益帮助,欢迎继续支持本站内容。
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
