意思就是，form表单中添加一个验证码验证，然后当点击提交时先核验验证码是否正确，如果正确再提交数据，否则不提交。
form表单
代码语言：javascript复制<form class="form-horizontal" action="submit-form.php" method="post"
onsubmit="return validateCaptcha()">
<label>验证码：</label>
<input type="text" id="captcha" name="captcha">
<span id="generated-captcha" onclick="generateCaptcha()">点击加载验证码</span>
<button type="submit">提交申请</button>
</form>在form表单中给onsubmit一个 return validateCaptcha()事件，并添加一个验证码展示区域 id为generated-captcha，点击后获取验证码绑定点击事件generateCaptcha()
验证码生成函数
代码语言：javascript复制 function generateCaptcha() {
var length = 6; // 定义验证码长度
var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; // 定义字符集
var captcha = ""; // 初始化验证码
// 循环生成指定长度的随机字符串
for (var i = 0; i < length; i ) {
captcha = charset.charAt(Math.floor(Math.random() * charset.length));
}
// 将生成的验证码显示在文本框中
document.getElementById("captcha").value = "";
// 将生成的验证码显示在页面上
document.getElementById("generated-captcha").innerHTML = captcha;
}验证码验证函数
代码语言：javascript复制 function validateCaptcha() {
var input = document.getElementById("captcha").value;
var generated = document.getElementById("generated-captcha").innerHTML;
if (input == generated) {
return true;
} else {
return false;
}
}当输入的验证码和随机生成的验证码相同返回true，否则返回false
表单提交事件
代码语言：javascript复制// 使用事件监听器来捕获表单提交事件
var form = document.querySelector("form");
form.addEventListener("submit", function (event) {
// 阻止默认的表单提交行为
event.preventDefault();
// 执行您想要的功能
validateCaptcha();
// 如果验证成功，则手动提交表单
if (validateCaptcha() == true) {
form.submit();
} else {
alert('验证码输入错误，请重新输入')
}
});这里，先阻止表单的默认事件，然后执行验证码验证，并且检测如果验证返回true则手动提交表单，否则返回错误信息。
