pattern属性常无效是因为它仅在表单提交时触发，且只对text、email、tel等文本类input生效，不适用于number或textarea；必须用^和$锚定正则边界，否则无法严格匹配。
pattern属性为什么经常没效果
因为 pattern 只在表单提交时触发校验，且仅对 <input type="text">、<input type="email">、<input type="tel"> 等文本类输入生效，对 <input type="number"> 或 <textarea> 无效（除非显式设为 type="text"）。
常见错误现象：pattern 写了但用户随便输、没提示；或者写了 pattern="[0-9]{3}" 却允许输入 "12" 或 "1234" —— 这是因为正则默认不锚定边界。
- 必须用
^和$显式锚定：写成pattern="^[0-9]{3}$"才表示“严格三位数字” - 浏览器不会自动添加
required，想强制非空得单独加该属性 - 移动端软键盘类型由
type决定，pattern不影响键盘弹出逻辑
手机号、身份证、邮箱的 pattern 写法差异
不同字段对格式容忍度不同，不能套用同一套正则。比如中国手机号需区分运营商号段，而邮箱必须兼容国际化域名（含中文域名需额外处理）。
- 中国大陆手机号（11位，以1开头）：
pattern="^1[3-9]d{9}$"（注意：不校验是否真实存在） - 18位身份证（末位可能是X）：
pattern="^[1-9]d{5}(18|19|20)d{2}(0[1-9]|1[0-2])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$" - 基础邮箱（不覆盖所有 RFC 标准，但兼顾常用场景）：
pattern="^[^s@]+@[^s@]+.[^s@]+$"
注意：这些正则未做全量验证（如身份证校验码、邮箱 DNS 检查），仅作前端轻量过滤；后端仍需完整校验。
立即学习“前端免费学习笔记（深入）”；
pattern 错误提示文案怎么自定义
浏览器默认提示是英文或系统语言，无法直接用 pattern 属性控制。要改提示，得靠 JavaScript 拦截 invalid 事件并调用 setCustomValidity()。
- 必须在 input 元素上绑定
oninvalid或监听invalid事件 - 首次触发后，需在
input或change时重置校验状态：setCustomValidity("") - 示例：
<input type="text" pattern="^1[3-9]\d{9}$" oninvalid="this.setCustomValidity('请输入正确的11位手机号')" oninput="this.setCustomValidity('')">
不重置会导致后续合法输入仍被标记为 invalid —— 这是高频踩坑点。
pattern 在 Safari 和旧版 Android 上的兼容性问题
pattern 在 iOS 10.3+ 和 Android 4.4+ 基本可用，但 Safari 对某些 Unicode 字符类（如 p{L}）完全不支持，且不支持正则标志（如 /i）。
- 避免使用
u、g、i标志 —— HTML 中的pattern不接受正则字面量语法 - 中文字符匹配请用
[\u4e00-\u9fa5]而非\p{Han} - 如果目标环境包含大量旧版 WebView（如某些安卓 App 内嵌页），建议降级为 JS 实时监听 + 正则 test()
真正难的不是写对正则，而是意识到 pattern 只是辅助手段，它既不能替代后端验证，也不能掩盖输入体验缺陷 —— 比如用户打错一位才提示，不如配合实时反馈或格式化掩码。
