pattern属性在type="number"上完全无效，浏览器会忽略它；仅对type="text"等文本类类型生效，数值校验应使用min/max/step或JS补充。
pattern 属性在 type="number" 上完全无效
浏览器会直接忽略 pattern，哪怕你写了也起不了任何校验作用。这是因为 HTML 规范明确要求：当 input 的 type 为 number、range、date 等原生控件类型时，pattern 属性**必须被忽略**。
常见错误现象：input[type="number"][pattern="[0-9]{6}"] 看似想限制 6 位数字，但用户仍可输入任意数字（包括小数、负数、超长数字），且提交时不会触发 pattern 提示。
- 真正生效的只有
type="text"、type="search"、type="tel"等文本类类型 - 若需数值校验（如整数、范围、位数），应改用
min/max/step配合 JS 补充逻辑 -
type="tel"是个折中选择：保持数字键盘唤起，又支持pattern（但注意 iOS Safari 对pattern在tel上的支持较弱）
pattern 正则写法不匹配输入值的原始字符串
pattern 匹配的是用户输入的**整个字符串值**（input.value），不是子串；且它默认隐式包裹了 ^ 和 $，等价于 ^your-pattern$。
典型翻车场景：pattern="[a-z]+" 本意是“至少一个字母”，但实际只接受纯字母字符串（不能带空格、不能有数字、不能开头结尾有空格）。用户输 "abc "（末尾空格）就直接失败。
- 需要允许前后空白？显式写成
pattern="^[a-zs]+$"，并注意s在 pattern 中需双写反斜杠：pattern="^[a-z\s]+$" - 要兼容中文？正则得包含 Unicode 范围，例如
pattern="^[a-zA-Z\u4e00-\u9fa5]{2,10}$" - 移动端软键盘可能自动补全或粘贴内容，导致意外空格或不可见字符，建议 JS 层 trim 后再校验
表单提交时 pattern 不触发、没提示
pattern 校验只在调用 form.reportValidity() 或用户点击原生提交按钮（type="submit"）时触发；如果用 JS 阻止默认行为后手动提交，或者用 button 触发 AJAX，则 pattern 完全不生效。
- 确保提交动作来自
<button type="submit">或回车触发的原生表单 submit 事件 - 检查是否有
novalidate属性在 form 上——它会禁用所有原生校验，包括pattern - 自定义样式覆盖了浏览器默认的
:invalid提示？可用input:invalid:not(:placeholder-shown)精准定位未聚焦但已失焦的无效状态 - Chrome/Firefox 会在 input 失焦（blur）后才显示红色边框和 tooltip，Safari 则常等到提交时才提示，体验不一致
移动端 pattern 兼容性与软键盘适配陷阱
iOS Safari 对 pattern 的支持长期不稳定：iOS 12.2+ 才开始支持 pattern 在 type="text" 上的提示，且不支持在 type="email" 或 type="url" 上叠加使用；Android Chrome 表现较好，但部分国产 WebView（如微信内嵌）会直接忽略 pattern。
- 不要依赖
pattern做关键业务校验（如手机号格式），JS + 后端双重校验才是可靠路径 - 想唤起数字键盘又保留 pattern？用
type="text" inputmode="numeric"（注意inputmode是独立属性，非 type 值） -
inputmode="decimal"可唤起带小数点的数字键盘，但 pattern 仍需匹配完整字符串（如"^[0-9]+(\.[0-9]{1,2})?$"）
pattern 是个“尽力而为”的声明式约束，不是执行引擎。它的行为高度依赖 type 类型、浏览器实现、用户交互路径，甚至软键盘厂商。真要控制输入内容，input 事件监听 + setSelectionRange 强制修正，比死磕 pattern 更可控。
