表单验证码通常用于防止机器人或自动化工具自动提交表单,确保提交表单的是真实用户。下面是一个简单的HTML和JavaScript示例,展示如何在表单中添加验证码功能。这个例子假设你有一个后端服务可以生成验证码图片并验证用户输入的验证码。

HTML部分:
<!DOCTYPE html>
<html>
<head>
<title>表单验证码示例</title>
</head>
<body>
<form id="myForm" action="/submit" method="post">
<!-- 其他表单字段 -->
<!-- 输入验证码 -->
<label for="captcha">验证码:</label>
<input type="text" id="captcha" name="captcha" required>
<!-- 显示验证码图片 -->
<img id="captchaImg" src="https://www.qq959.com/static/image/lazy.gif" class="lazy" original="https://www.qq959.com/static/image/nopic320.png" <!-- 后端生成的验证码图片URL -->
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
</body>
</html>JavaScript部分(可选,用于刷新验证码):

document.getElementById(’captchaImg’).onclick = function() {
// 重新加载验证码图片,假设后端提供了一个函数来重新加载图片并更新表单中的img标签的src属性,这里你需要根据实际情况替换为你的后端服务提供的URL或方法。
this.src = ’/captcha-image?random=’ + Math.random(); // 这只是一个简单的示例,实际情况下可能需要更复杂的方法。
};后端部分:你需要一个服务来生成验证码图片,并在用户提交表单时验证用户输入的验证码是否正确,这部分的实现取决于你使用的后端语言和框架,如果你使用Python Flask框架,你可以使用flask-captcha库来生成验证码,如果你使用Node.js和Express框架,你可能需要使用其他库或服务来实现这个功能,具体的实现方式取决于你的需求和你的技术栈。




