HTML input 的 pattern 属性未生效的根本原因是浏览器仅在表单提交或调用 checkValidity() 时触发验证，且正则默认全字符串匹配、无需 ^$，不支持高级断言，须配合 required 和 form 使用。
HTML input 的 pattern 属性为什么没生效？
根本原因通常是浏览器没触发验证，或者正则写法和预期不匹配。它只在表单提交（submit）或调用 checkValidity() 时才起作用，不是实时监听输入的“过滤器”。另外，pattern 的正则默认是**全字符串匹配**，不需要写 ^ 和 $ —— 浏览器自动加上了，手动加反而容易出错。
常见错误现象：
- 输入非法内容后点提交，没弹提示，表单直接发出去了 → 检查是否漏了
required或没用<form></form>包裹 - 写了
pattern="[0-9]{3}"，但输 "12" 就报错 → 因为它要求**恰好3位数字**，少一位就失败 - 在 Chrome 里正常，Safari 不提示 → Safari 对
title提示文案更依赖，建议补上title属性
pattern 正则怎么写才符合 HTML 表单验证逻辑？
别按 JS 正则习惯来套。HTML 的 pattern 是基于 ECMAScript 5.1 的 RegExp，不支持 /(?=...) 这类高级断言，也不支持 u 或 s 标志。它只接受裸正则字面量（不带 /），且隐式全局锚定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手机号验证用
pattern="[0-9]{11}"，别写^\d{11}$ - 邮箱别指望
pattern做完整校验，简单限制可用pattern=".+@.+..+"，但必须配合type="email" - 密码强度提示类需求，
pattern力不从心，该用 JS 监听input事件做实时反馈 - 中文字符要小心：Unicode 范围如
[u4e00-u9fa5]在部分老 Android 浏览器中不被支持，优先考虑服务端兜底
pattern 和 type、required 怎么配合？
单独用 pattern 几乎没意义。它必须和 type="text"（或兼容类型）+ required + <form></form> 提交流程一起工作，才能触发原生验证 UI。
关键组合规则：
-
type="number"会忽略pattern—— 浏览器优先按数字类型解析，非法字符根本进不到 pattern 验证阶段 -
type="tel"或type="email"可以和pattern共存，但验证顺序是：先过 type 内置规则，再跑 pattern - 没写
required，空值会直接跳过pattern检查 → 即使正则本身不接受空串，也不会报错 - 想让非必填字段也走 pattern，得用 JS 手动调用
input.checkValidity()并监听invalid事件
移动端软键盘适配和 pattern 的实际影响
很多人以为 pattern 能控制手机键盘类型，其实不能。真正影响软键盘的是 inputmode 和 type：type="tel" 弹数字键盘，inputmode="decimal" 弹带小数点的键盘。而 pattern 只负责提交前校验，对键盘毫无影响。
容易踩的坑：
- 在 iOS 上，
pattern="[0-9]*"配合type="text"，并不能唤起数字键盘 → 改用type="tel"或inputmode="numeric" - Android 某些版本下，
pattern太复杂（比如含多个括号组）会导致验证失败却不报错，表现像没加一样 - 用户长按粘贴内容时，
pattern仍会校验，但光标位置、选中状态可能混乱，视觉反馈滞后
复杂正则、多语言、模糊匹配这些事，pattern 天然不适合。它只是个轻量级的“提交前快筛”，真要稳，服务端校验一个都不能少，前端最多当个友好提醒。
