<!DOCTYPE html>
<html>
<head>
<title>验证码生成与验证</title>
<style>
body { font-family: Arial, sans-serif; }
#captcha { text-transform: uppercase; }
#captchaError { color: red; display: none; }
</style>
</head>
<body>
<form id="captchaForm">
验证码：<input type="text" id="captcha" maxlength="4">
<span id="captchaError">验证码错误</span>
<button type="submit">提交</button>
</form>
<script>
// 生成随机验证码的函数
function generateCaptcha() {
let digits = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let captcha = '';
for (let i = 0; i < 4; i++) {
captcha += digits[Math.floor(Math.random() * digits.length)];
}
return captcha;
}
// 验证验证码的函数
function validateCaptcha() {
let userInput = document.getElementById('captcha').value.toUpperCase();
let correctCaptcha = generateCaptcha();
if (userInput === correctCaptcha) {
// 验证码正确的处理逻辑
alert('验证码输入正确！');
// 清除验证码错误消息
document.getElementById('captchaError').style.display = 'none';
return true;
} else {
// 显示验证码错误消息
document.getElementById('captchaError').style.display = 'inline';
return false;
}
}
// 表单提交事件监听
document.getElementById('captchaForm').addEventListener('submit', function(event) {
if (!validateCaptcha()) {
event.preventDefault(); // 验证码错误时阻止表单提交
}
});
// 页面加载完成后生成验证码
window.onload = function() {
document.getElementById('captcha').value = generateCaptcha();
};
</script>
</body>
</html>这段代码实现了一个简单的验证码生成与验证功能。页面加载时生成一个新的验证码，用户输入验证码后提交表单，脚本通过比较用户输入和验证码来验证是否匹配，匹配则允许提交，不匹配则显示错误消息并阻止表单提交。