html5的required属性可直接阻止空验证码提交，仅需为input添加required和aria-required="true"，但仅校验非空，不验证内容匹配；真实比对必须由后端用captcha_id查缓存完成。

验证码输入为空时如何阻止表单提交

用户没填验证码就点提交，后端校验前必须在前端拦截。HTML5 的 required 属性最直接有效，但要注意它只对 <input type="text"> 生效，且不校验内容是否匹配——仅防空值。

• 给验证码输入框加上 required 和 aria-required="true"，兼顾可访问性
• 避免用 <input type="number">：用户可能输入字母（如“aB3x”），数字类型会自动过滤或报错
• 提交时若触发 checkValidity() 返回 false，浏览器默认弹出提示，也可用 setCustomValidity() 改写提示语

如何比对用户输入与服务端下发的验证码

前端不能存真实验证码，只能传给后端比对。常见错误是把验证码明文塞进 data- 属性或 JS 变量里，这等于白送攻击者。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 前端只保留一个一次性 captcha_id（如 UUID），和用户输入一起发到后端
• 后端根据该 ID 查缓存（Redis / 内存）中的原始验证码值，完成比对后立即失效
• 若用图片验证码，<img src="/captcha?r=123"> 中的 r=123 应是随机数，防止浏览器缓存导致同一张图反复使用

输入框失去焦点时要不要实时校验

不建议。验证码本质是一次性令牌，实时校验需频繁请求后端，既增加负载，又暴露校验时机（比如用户输错第一位就触发请求，可能被用于暴力探测）。

• 最多做格式预检：比如限制长度（maxlength="4"）、禁止粘贴（onpaste="return false"）
• 若真要反馈，等用户提交后统一显示错误，错误信息用 data-captcha-error 控制显隐，避免 DOM 频繁重绘
• 注意：移动端软键盘切换可能触发多次 blur，单纯监听 blur 做校验不可靠

为什么验证码输入后刷新页面会导致重复提交

用户点完提交按钮，页面未跳转前刷新，浏览器可能重发上一个 POST 请求——而此时验证码已失效，后端必然拒绝。

• 表单提交后立即将按钮置为 disabled，并改文字为“提交中…”
• 配合 history.replaceState() 替换当前 URL，避免刷新重发
• 更稳妥的是后端返回 HTTP 303 See Other 跳转到结果页，彻底切断原请求上下文

实际中最容易被忽略的是验证码的生命周期管理：生成、下发、存储、比对、失效，每个环节都要对齐时间窗口（比如 Redis TTL 设为 120 秒，前端倒计时却显示 180 秒），否则用户看到“验证码正确”却提交失败，问题根本不在 HTML 或 JS。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！