HTML 生成验证码并验证
以下是一个简单的HTML和JavaScript代码示例，用于生成验证码并进行验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码生成与验证</title>
<script>
function generateCaptcha() {
var captcha = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for (var i = 0; i < 6; i++) {
captcha += characters.charAt(Math.floor(Math.random() * charactersLength));
}
document.getElementById('captcha').textContent = captcha;
sessionStorage.setItem('expectedCaptcha', captcha);
}
function validateCaptcha() {
var userCaptcha = document.getElementById('userCaptcha').value;
var expectedCaptcha = sessionStorage.getItem('expectedCaptcha');
if (userCaptcha.toLowerCase() === expectedCaptcha.toLowerCase()) {
alert('验证码正确！');
} else {
alert('验证码错误！');
}
}
</script>
</head>
<body onload="generateCaptcha();">
<div>
<span id="captcha">Loading...</span>
<button onclick="generateCaptcha();">换一个</button>
</div>
<input type="text" id="userCaptcha" placeholder="请输入验证码">
<button onclick="validateCaptcha();">验证</button>
</body>
</html>这段代码包含了一个验证码生成函数generateCaptcha()和一个验证函数validateCaptcha()。当页面加载时，会自动生成一个新的验证码。用户输入验证码后，点击验证按钮将触发validateCaptcha()函数，对输入的验证码与期望的验证码进行比较，并通过弹窗显示结果。验证码的期望值存储在sessionStorage中，以确保在用户刷新页面后仍能正确验证。
评论已关闭