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>
看完上述内容,你们掌握JavaScript中怎么随机生成验证码并进行校验的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注天达云行业资讯频道,感谢各位的阅读!