pattern仅对text、search、tel、url、email、password六种type生效，number等类型会忽略；需配合required和title使用，正则不加/^$/且title是唯一提示出口，复杂校验必须用js接管。
pattern 属性不是“写对正则就能用”，它只在表单提交时做全字符串匹配，且只对特定 type 有效；不配合 required 和 title，基本等于没写。
pattern 哪些 input type 能用、哪些会失效
只对 text、search、tel、url、email、password 这六种类型生效。其他类型如 number、range、date、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}">：✅ 兼顾移动端体验与格式控制
正则怎么写才不白写：HTML 中的 pattern 语法限制
浏览器会自动把你的 pattern 值当作 ^(?:...)$ 处理，所以你只需写核心模式，不能带 /、^、$、i、g 等 JS 正则语法。
正确写法示例：
-
pattern="[a-zA-Z0-9_]{3,16}"（用户名） -
pattern="1[3-9]\d{9}"（手机号，\d在多数现代浏览器中可用，但旧版 Firefox 建议写[0-9]） -
pattern="(?=.*\d)(?=.*[a-z]).{8,}"（密码，注意：部分老 Safari 不支持环视）
错误写法及后果：
-
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 无法覆盖的场景，必须用 JavaScript 接管
以下情况 pattern 天然无能为力，硬套只会埋坑：
- 跨字段联动：比如“确认密码”需和“新密码”严格一致
- 实时反馈：用户每敲一个键就标红/绿状态，
pattern只在 submit 或checkValidity()时触发 - 异步校验：检查用户名是否已被注册
- 预处理需求：如自动
.trim()去首尾空格（pattern=".*[0-9]{6}$"遇到"123456 "就失败） - 动态规则：根据国家选择切换手机号正则，或根据密码强度实时显示提示条
JS 校验时务必注意：pattern 的行为等价于 new RegExp(`^${patternStr}$`).test(value)，所以 JS 中也应统一使用带 ^ 和 $ 的完整正则，避免前后不一致。
真正容易被忽略的是：用户修改输入后再次提交仍报错——因为 input.validity.valid 状态未自动刷新，需手动调用 reportValidity() 或在 input 事件中重置 setCustomValidity('')。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
