JavaScript实现随机生成验证码及校验
更新时间：2021年06月16日 11:46:15 作者：江南时雨
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面的代码是从实际项目中AJAX的回调部分 copy 出来的，使用了JS的递归，文本格式为JSON2010-05-05
众所周知，IE8开放了对DOM原型的支持以及ECMA v5的两个新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor（单词好长……），并且这两个新方法居然只能用于DOM。2009-12-12
通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递，下面为大家介绍下函数的使用语法2013-12-12
Javascript函数中的参数对象arguments是个对象，而不是数组。但它可以类似数组那样通过数字下表访问其中的元素，而且它也有length属性标识它的元素的个数。2015-06-06
Apply an AutoFormat to an Excel Spreadsheet
Apply an AutoFormat to an Excel Spreadsheet...2007-06-06
这篇文章主要介绍了使用js函数定时器实现定时读取系统实时连接数,需要的朋友可以参考下2014-04-04
在实际开发中我们通常会使用Nginx来部署前端静态页面,以提供快速访问速度和良好的用户体验,这篇文章主要给大家介绍了关于使用Nginx部署前端项目的详细步骤,需要的朋友可以参考下2024-08-08
在JavaScript中,事件流冒泡是一种非常重要的概念,它是指事件从最内层的元素开始,逐级向外传播到最外层元素的过程,下面我们就来了解下JavaScript中事件流冒泡的原理与实现吧2023-11-11
这篇文章主要为大家详细的介绍了Bootstrap中Carousel的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
掌握JavaScript中的DOM操作可通过id、class、标签名及CSS选择器进行元素选择和内容修改,Timer定时器功能包括设置延时和间隔执行,详细介绍了事件处理器和事件监听函数的使用,以及避免事件覆盖的建议2024-10-10
最新评论