您的位置:首页 > Web前端 > JavaScript

关于js生成随机验证码并验证

2020-06-29 04:59 936 查看

用JavaScript生成随机验证码并验证

  1. body部分
<span id="code" style="background-color: #ccc">1010</span>
<input type="button" value="刷新" onclick="randomCode()"><br>
<input type="text" id="txt" placeholder="请输入验证码">
<input type="button" value="提交" onclick="checkCode()">
  1. script部分
<script>
//获取元素
var code = document.getElementById('code');
var txt = document.getElementById('txt');
//新建字符串,字符串中包含所有的值
var str = '0123456789abcdefghijklmnopqrstuvwxyz';

//封装函数
function randomCode() {
//定义一个空的字符串
var strNew = '';
// 随机产生四位字符,放在code元素里
for (var i = 0; i < 4; i++) {
var index = parseInt(Math.random() * str.length);
strNew += str.charAt(index);
}
// 设置code元素的innerText
code.innerText = strNew;
}

//验证输入的是否正确,函数封装
function checkCode() {
if (txt.value == code.innerText) {
alert('验证成功');
} else {
alert('验证失败,请重新输入');
txt.value = '';
randomCode();
}
}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: