input的pattern属性仅在表单提交或调用checkValidity()时触发校验，不实时拦截输入；其正则默认隐式添加^$锚定，无需手动书写，且错误提示依赖title属性、不可定制。
input 的 pattern 属性只在提交时触发校验
很多人以为给 加了正则，用户一输入就会实时报错，其实不是。pattern 仅在表单调用 checkValidity() 或触发原生提交（比如点击 type="submit" 按钮）时才生效。输入过程中不会拦截、也不会高亮错误。
这意味着：如果想实现「边输边提示」，必须配合 JavaScript 监听 input 或 blur 事件手动校验，pattern 本身做不到。
-
pattern的正则默认**隐式包裹 ^ 和 $**，即自动锚定首尾，不需要自己写^...$ - 浏览器内置的错误提示文案不可定制，显示的是浏览器语言环境下的默认文本（如 Chrome 中文版显示“请输入符合指定格式的值”）
- 若要兼容旧版 Safari（p{L}）不支持，建议用 ASCII 范围明确的写法
正则写法必须匹配整个字符串，不能只写片段
pattern 的作用是验证整个输入值是否完全符合该模式。比如限制手机号为 11 位数字，写成 pattern="[0-9]{11}" 是对的；但写成 pattern="[0-9]+" 就不行——它允许任意长度数字，起不到限制作用。
常见误写：
- 用
pattern="d{1,5}"期望限制 1–5 位数字 → 实际会匹配成功所有 ≤5 位的数字，但无法阻止用户多输（因为没锚定，且浏览器自动加 ^$ 后等价于^d{1,5}$，所以其实是对的；真正问题常出在没加required，导致空值也通过） - 写
pattern="abc"本意是“包含 abc”，结果变成“只能是 abc” - 邮箱校验直接抄网上复杂正则，却忽略
pattern不支持^$外的标志（如/i），也不支持gm等修饰符
与 JavaScript checkValidity() 配合才能拿到校验状态
单纯靠 pattern 无法编程式判断是否合法，得调用 DOM 方法。例如：
<input id="phone" pattern="[0-9]{11}" required><button onclick="console.log(phone.checkValidity())">检查</button>
返回 true 表示当前值满足 pattern + required + 其他约束（如 minlength）；返回 false 时可通过 validationMessage 获取浏览器提示语：
-
phone.validationMessage返回字符串，如“值必须匹配正则表达式 [0-9]{11}” - 若同时有
required且为空，优先返回“请填写此字段”，而非 pattern 错误 - 调用
reportValidity()会强制弹出浏览器默认气泡提示（含图标和文字），适合提交前统一触发
移动端软键盘类型不随 pattern 自动切换
有人以为 pattern="[0-9]+" 能让 iOS 键盘自动切到数字键盘，其实不能。iOS 只认 inputmode 和 type：
- 数字输入应设
inputmode="numeric"+type="text"（type="number"在 iOS 有滚轮和小数点问题） -
pattern对键盘无影响，它只管校验逻辑 - Android 上
inputmode支持度较好，但部分老机型仍依赖type，稳妥做法是type="text" inputmode="decimal"配合pattern="\d+(\.\d+)?"
真正容易被忽略的是：pattern 正则里的反斜杠在 HTML 属性中要写成双反斜杠（\d），否则会被解析为转义字符，导致正则失效。
