<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表单元素.onblur = function(){
表单输入框失去焦点触发的事件
}
var str = "26个小写英文26个大写英文"
获取里面的值 str[下标] -->
<div class="wrap">
<input type="text" placeholder="请输入验证码">
<span></span>
<h3 style="color: red;"></h3>
</div>
<script>
var inp = document.getElementsByTagName("input")[0];
var oSpan = document.getElementsByTagName("span")[0];
var h3 = document.getElementsByTagName("h3")[0];
var arr = [
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"
]
var code = "";
for (var i = 0; i < 4; i++) {
var a = parseInt(Math.random() * arr.length);
code += arr[a];
}
oSpan.innerHTML = code;
console.log(code);
inp.onblur = function () {
if (inp.value.toLowerCase() == oSpan.innerHTML.toLowerCase()) {
h3.innerHTML = "用户输入正确"
} else {
h3.innerHTML = "用户请输入正确的验证码"
}
}
</script>
</body>
</html>
js 随机生成验证码
于 2022-09-01 22:45:54 首次发布