后端必须校验验证码，前端仅做基础拦截；验证码图片需动态生成并防缓存；提交失败后须同步刷新图片与清空输入框；推荐优先使用reCAPTCHA等成熟方案。
怎么让表单提交前校验验证码是否正确
后端必须参与校验，前端只做基础拦截——纯前端生成和验证的验证码毫无安全意义。用户输入的 captcha_input 值要随表单一起发到后端，由服务端比对 session 或缓存中存储的 captcha_code。
- 常见错误：用 JS 在前端生成图形验证码并直接比对，攻击者绕过 JS 就能暴力提交
- 正确做法：表单提交时，把用户输入的值 + 表单其他字段一并 POST 到后端接口
- 后端收到后，先查当前 session 的
captcha_code是否存在、未过期、且与传入值一致 - 校验失败必须清空该 session 中的
captcha_code，防止重放
怎么把验证码图片嵌入表单并支持点击刷新
用
- HTML 示例：
- 点击刷新时，不要用
img.src = img.src，它在某些浏览器可能被忽略；改用img.src = '/captcha?r=' + Date.now() - 后端路由（如 Express）需返回 PNG/JPEG 内容，且设置
Content-Type: image/png和Cache-Control: no-store - 别忘了给图片加
alt和aria-label，方便读屏软件识别“验证码图片”
为什么 form 提交后验证码没清空或报错不明显
表单校验失败时，页面重载或局部更新后，验证码图片和输入框状态常不同步，这是交互断层最常被忽略的地方。
- 后端返回校验失败响应后，前端若只是显示提示文字，但没重置
captcha_img的 src，用户看到的是旧验证码 - 输入框
没清空，用户二次提交仍带旧值，容易误以为“输对了却报错” - 建议：校验失败后，立即调用
document.getElementById('captcha-img').src = '/captcha?r=' + Date.now()并清空 input 的value - 如果用 fetch 提交，注意响应中要包含新验证码 token，否则下次提交还是用旧图比对
要不要用第三方验证码（如 reCAPTCHA）代替自建
如果你不是为学习原理或内网系统定制，直接用 reCAPTCHA v3 或 hCaptcha 更省事也更可靠。
- 自建验证码防不了 OCR、打码平台、或自动化工具批量识别，尤其简单数字图
- reCAPTCHA v3 不需要用户点选，只返回一个分数（
grecaptcha.execute()），后端根据分数决定是否放行 - 接入成本低：加 script 标签、在表单加
data-sitekey、提交时带上g-recaptcha-response字段即可 - 注意：国内部分网络环境可能加载
recaptcha.net失败，可考虑备用方案或用国内服务（如腾讯防水墙）
事情说清了就结束。真正难的不是“怎么加”，而是“怎么不让验证码变成用户体验断点，又不牺牲基本防护力”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
