html的pattern属性仅支持表单提交前的基础格式提示，无法替代后端校验，也不能可靠拦截错误；它需配合required、title及text/tel等type才生效，正则须为[0-9]{6}等裸字符串，禁用^$和斜杠，且ie不支持、safari对inputmode有限。
HTML本身不支持正则校验短信验证码
HTML的 pattern 属性确实能写正则，但仅用于表单提交前的简单提示，**无法替代服务端校验**，也不能可靠拦截错误输入——浏览器可绕过、正则不执行、移动端软键盘常忽略 pattern。真正有效的验证码校验必须由后端完成，前端只做基础格式引导。
input 的 pattern 能做什么、不能做什么
它适合约束输入长度和字符类型，比如 6 位纯数字验证码：
<input type="text" pattern="[0-9]{6}" maxlength="6" inputmode="numeric">
注意这些关键点：
-
pattern不会自动触发验证，需配合required或手动调用checkValidity() -
inputmode="numeric"提示手机弹出数字键盘，但不阻止用户粘贴字母 - 正则中不要用
^和$—— 浏览器内部已自动锚定，加了反而失效 - IE 完全不支持
pattern，Safari 对inputmode支持有限
真正该防的不是“格式”，而是“时效与重放”
用户输错 6 位数？那只是体验问题。真正要拦住的是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 同一验证码被多次提交（需后端记录已使用状态）
- 验证码过期（如 5 分钟后失效，需比对时间戳）
- 高频请求刷码（需接口限流 + 图形验证码前置）
- 前端硬编码验证码（绝对禁止！所有验证码必须由后端生成并下发）
前端能做的只有：禁用输入框直到倒计时结束、清空输入后自动聚焦、粘贴时 trim 空格——这些靠 JS 控制，和正则无关。
如果非要 JS 做前端格式初筛，用 test() 就够了
别封装复杂函数，就一行判断：
const isValid = /^\d{6}$/.test(inputValue);
但请记住：
- 这个判断只在用户离开输入框或点击提交时执行，不能代替
fetch请求校验 - 不要用
oninput实时验证——中文输入法组合过程会产生临时非法值，导致误报 - 若后端返回的是 4 位或 8 位验证码，正则必须动态更新，不能写死
\d{6}
最常被忽略的一点：验证码输入框应设置 autocomplete="one-time-code"，这是现代浏览器识别短信验证码的唯一标准方式，影响自动填充和密码管理器行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
