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 变量里，这等于白送攻击者。
- 前端只保留一个一次性
captcha_id（如 UUID），和用户输入一起发到后端 - 后端根据该 ID 查缓存（Redis / 内存）中的原始验证码值，完成比对后立即失效
- 若用图片验证码，
<img src="/captcha?r=123">中的r=123应是随机数，防止浏览器缓存导致同一张图反复使用
输入框失去焦点时要不要实时校验
不建议。验证码本质是一次性令牌，实时校验需频繁请求后端，既增加负载，又暴露校验时机（比如用户输错第一位就触发请求，可能被用于暴力探测）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 最多做格式预检：比如限制长度（
maxlength="4"）、禁止粘贴（onpaste="return false"） - 若真要反馈，等用户提交后统一显示错误，错误信息用
data-captcha-error控制显隐，避免 DOM 频繁重绘 - 注意：移动端软键盘切换可能触发多次
blur，单纯监听blur做校验不可靠
为什么验证码输入后刷新页面会导致重复提交
用户点完提交按钮，页面未跳转前刷新，浏览器可能重发上一个 POST 请求——而此时验证码已失效，后端必然拒绝。
立即学习“前端免费学习笔记（深入）”；
- 表单提交后立即将按钮置为
disabled，并改文字为“提交中…” - 配合
history.replaceState()替换当前 URL，避免刷新重发 - 更稳妥的是后端返回
HTTP 303 See Other跳转到结果页，彻底切断原请求上下文
