pattern属性仅对text、search、tel、url、email、password六种type生效；需配合required和title使用，正则不加/^$/且自动全匹配；number等类型会忽略，复杂校验必须用js接管。
pattern 属性不能单独起作用，必须配合 type、required 和 title 才能实际生效；复杂校验（如密码强度、跨字段联动）必须用 JavaScript 接管。
哪些 input type 支持 pattern
只对 text、search、tel、url、email、password 这六种 type 生效。其他类型如 number、date、range、checkbox 会完全忽略 pattern —— 浏览器先将输入转为数值或日期对象，正则根本收不到原始字符串。
常见错误示例：
-
<input type="number" pattern="[0-9]{6}">：永远不触发校验，iOS 还可能自动删前导零 -
<input type="tel" pattern="1[3-9]\d{9}">：✅ 正确，tel保留字符串且唤起数字键盘 -
<input type="text" inputmode="numeric" pattern="[0-9]{6}">：✅ 兼顾移动端体验与格式控制
pattern 正则怎么写才不白写
浏览器会自动把你的 pattern 值当作 ^(?:...)$ 处理，你只需写核心模式，不能带 /、^、$、i、g 等 JS 正则语法。
正确写法（直接用于 pattern 属性）：
-
pattern="[a-zA-Z0-9_]{3,16}"（用户名） -
pattern="1[3-9][0-9]{9}"（手机号，用[0-9]替代\d更兼容旧版 Firefox/Android WebView） -
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"（密码，注意：老 Safari 不支持环视）
错误写法及后果：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
pattern="/^[0-9]{6}$/"：斜杠被当作文本，整个表达式字面匹配，永远失败 -
pattern="^[0-9]{6}$"：锚点冗余，某些旧版 Safari 可能跳过整条规则 -
pattern="d{8}"：缺少反斜杠，解析为字面量d{8}，不是数字
title 是唯一可控的提示出口，不是可选项
没设 title，Chrome/Firefox 默认报错文案是“请与所要求的格式匹配”，用户根本不知道要输什么。而 title 是唯一能在错误气泡、hover 提示、input.validationMessage 中复用的内容。
实用建议：
-
title="请输入6位数字，不要加空格或字母"比title="格式错误"有用十倍 -
title="邮箱必须以小写字母开头，域名后缀为 .com 或 .cn"明确约束条件 - iOS Safari 对
title支持较弱，若需强提示，得用 JS 的setCustomValidity()补充
title 不参与校验逻辑，只用于展示，可以写中文、标点、emoji，无需编码。
为什么 pattern 总是“看起来没反应”
原生 pattern 校验只在表单提交（submit 事件）或调用 checkValidity() 时触发，不会监听 input 或 blur。它也不主动高亮、不滚动到错误字段、不提供自定义样式反馈。
想实现离开字段就提示，必须手动介入：
- 监听
blur或input事件 - 用
RegExp.test()做判断（注意：JS 正则要带^和$，与pattern行为对齐） - 调用
setCustomValidity("错误信息")设置提示，通过时必须调setCustomValidity("")清空，否则旧错误残留 - 用
reportValidity()主动弹出浏览器默认气泡（但 Firefox 不滚动，Chrome 会）
真正复杂的场景——比如“确认密码”需和“新密码”一致、“用户名是否已被注册”、“根据国家码切换手机号正则”——pattern 完全无能为力，必须由 JavaScript 控制整个验证生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
