本文介绍了使用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>以上内容即为本文介绍的全部实现细节，希望能为读者的学习提供有益帮助，欢迎继续支持本站内容。