pattern属性仅对text/search/url/tel/email/password类型生效，number/range等类型会忽略；需用text+inputmode="numeric"兼顾数字键盘与正则校验；正则自动全文匹配，HTML中反斜杠需双写；title提供自定义提示，required与pattern需配合实现非空格式校验。
pattern属性不生效？检查input类型是否为text/number/email等原生支持类型
pattern只对 <input type="text">、<input type="search">、<input type="url">、<input type="tel">、<input type="email"> 和 <input type="password"> 生效。type为number或range时，pattern会被忽略——浏览器根本不触发正则校验逻辑。
常见错误是写成：<input type="number" pattern="[0-9]{6}">，这不会弹出校验提示。必须改用type="text"并配合inputmode="numeric"（提升移动端数字键盘体验）。
- 若需数值语义+正则校验，用
type="text"+inputmode="numeric"+pattern - 邮箱类校验优先用
type="email"，它自带基础格式检查，再叠pattern做增强（如限制域名后缀） -
type="hidden"、type="checkbox"等完全不支持pattern
正则写错导致“永远不通过”或“永远通过”
pattern的正则默认是**全文匹配**，但不带^和$锚点——浏览器内部会自动包裹，等价于^(?:...)$。所以你写pattern="a+b"实际匹配的是“一个或多个a后紧跟一个b”，且必须占满整个输入值。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 误写
pattern="d{8}"：反斜杠在HTML属性中要双写，正确是pattern="\d{8}"，否则解析为字面量d{8} - 中文字符校验写
pattern="[u4e00-u9fa5]+"，但用户可能混输空格或标点，建议放宽为pattern="^[\u4e00-\u9fa5\s\w]{2,10}$"（注意HTML里仍用双反斜杠） - 手机号校验用
pattern="1[3-9]\d{9}"，但没限制长度边界，输入"138123456789"（12位）也会通过——因为正则本身没写^/$，而浏览器自动加了，所以实际是全文匹配，没问题；但更稳妥写法是显式写出pattern="^1[3-9]\d{9}$"，避免误解
校验失败时的提示文案无法自定义？靠title属性兜底
pattern触发的原生报错文案由浏览器决定（如Chrome显示“请匹配所要求的格式”），无法用JS修改。唯一可干预的方式是设置title属性，它的值会在气泡提示中显示：
<input type="text" pattern="\d{6}" title="请输入6位数字验证码">
注意点：
-
title内容必须简短，过长会被截断 - 如果同时存在
required和pattern，空值时触发required提示，非空但不匹配才触发pattern提示（以title为准） - 部分旧版Safari对
title支持不稳定，建议搭配aria-invalid="true"供读屏软件识别
兼容性与降级：IE10+支持，但不校验空值
pattern在IE10+、Edge、Chrome、Firefox、Safari均支持，但有关键限制：它**只在校验非空输入时触发**。如果字段允许为空（即没加required），用户留空提交，pattern完全不运行。
这意味着：
- 想让“非空且符合格式”成为必选项，必须同时写
required+pattern - 若业务允许为空，但非空时需校验，则pattern本身已足够；无需JS补充
- Android 4.3及更早WebView不支持pattern，如有覆盖需求，只能靠服务端校验兜底
真正零JS的前提是接受原生行为边界：不控制样式、不干预提交流程、不处理复杂联动。一旦需要实时反馈或跨字段校验，就得引入JS——pattern只是减负，不是替代。
