版权声明:前端菜鸟--人间草木所有 https://blog.csdn.net/qq_43258252/article/details/87386453
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>验证码</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style></style>
</head>
<body>
<div class="new-web-row">
<span class="web-form-span ">验证码</span>
<input
type="text"
class=" web-form-input "
required="required"
id="Yzm"
/>
<input
type="button"
id="code"
value="点我验证"
class="btn-list-btn"
onclick="createCode()"
/>
</div>
<script>
// 在全局定义验证码
let code
// 产生验证码函数
let createCode = () => {
code = ''
let codeLength = 4 // 验证码的长度
let checkCode = document.getElementById('code')
// 随机数
let random = [
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'
]
for (let i = 0; i < codeLength; i++) {
// 循环操作
let index = Math.floor(Math.random() * 36) // 取得随机数的索引(0~35)
code += random[index] // 根据索引取得随机数加到code上
}
checkCode.value = code // 把code值赋给验证码
}
// 网页一刷新就刷新验证码
createCode()
// 验证码校验函数
let validate = () => {
let inputCode = document.getElementById('Yzm').value.toUpperCase() // 取得输入的验证码并转化为大写
if (inputCode.length <= 0) {
// 若输入的验证码长度为0
alert('请输入验证码!') // 则弹出请输入验证码
$('#Yzm').focus() // 重新聚焦验证码框
YZM = false
} else if (inputCode != code) {
// 若输入的验证码与产生的验证码不一致时
alert('验证码输入错误!@_@') // 则弹出验证码输入错误
createCode() // 刷新验证码
$('#Yzm').val('') // 清空文本框
$('#Yzm').focus() // 重新聚焦验证码框
YZM = false
} else {
// 输入正确时
$('#Yzm').blur() // 绑定验证码输入正确时要做的事
YZM = true
alert('验证码输入正确!@_@')
}
}
// 校验验证码
document.getElementById('Yzm').addEventListener('change', validate)
</script>
</body>
</html>