pattern校验需同时满足type为text或tel、加required、设title，否则浏览器不触发；正则应写为[0-9]{6}，禁用/^$/、\d及锚点；推荐type="tel"或inputmode="numeric"优化移动端输入。

直接用 pattern 属性就能校验验证码，但必须满足三个硬性条件：type 是 text（或 tel）、加 required、配 title；否则浏览器根本不会触发校验。

为什么 pattern 不生效？常见静默失效组合

不是正则写错了，而是浏览器压根没启动校验机制：

• type="number"：iOS 会自动删前导零，且 pattern 被完全忽略 —— 验证码 “001234” 一输就变 “1234”
• type="text" 但没加 required：空值和错值都默认通过，提交时零提示
• type="text" + required 但没设 title：Chrome 报 “请与所要求的格式匹配”，用户不知道要输 6 位数字
• type="hidden" 或 type="button" 等非文本类：pattern 属性被浏览器直接丢弃

pattern="[0-9]{6}" 是最简可靠写法

别加 /^$/、别用 \d、别写 ^ 或 $ —— 浏览器内部自动补全全匹配逻辑，你只管写核心模式：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• ✅ pattern="[0-9]{6}"：明确、兼容 Safari/IE/Chrome，支持前导零
• ❌ pattern="/^[0-9]{6}$/"：斜杠当字面量，永远不匹配
• ❌ pattern="\d{6}"：旧版 Safari 不识别 \d，可能跳过整条规则
• ❌ pattern="^[0-9]{6}$"：锚点冗余，Safari 14 以下有概率静默失效

移动端体验不能只靠 pattern

单纯 pattern="[0-9]{6}" 在手机上键盘不友好，用户得手动切英文键盘输数字。更稳妥的做法是：

立即学习“前端免费学习笔记（深入）”；

• 用 type="tel"：唤起数字键盘，保留字符串，pattern 生效 ✅
• 或用 type="text" inputmode="numeric"：语义更准，Android/iOS 均支持，比 tel 更少歧义 ✅
• 避免 inputmode="decimal" 或 "verbatim"：前者带小数点，后者不唤数字键盘 ❌
• iOS Safari 对 title 提示支持弱，若需强反馈，得用 JS 补 setCustomValidity()

真正容易被忽略的是：pattern 只在表单 submit 时校验一次，不监听粘贴、不自动重置错误状态；用户改完内容后再次提交，仍可能报上次的错 —— 这时候得手动调 reportValidity() 或在 input 事件里清空 setCustomValidity("")。