HTML表单中pattern属性需配合title才能生效，仅校验提交时触发，不实时拦截；常见错误包括漏title、正则未锚定、忽略大小写、误当maxlength用；pattern与type、inputmode分工不同，混用易冲突；移动端和读屏器支持差异大，须靠label、title和服务端校验协同保障可用性。
HTML表单中配置输入内容模式，核心是用 pattern 属性配合正则表达式，但仅靠它无法生效——必须加 title 才有提示，且不能替代服务端校验。
为什么写了 pattern 却没报错、也不拦截提交
浏览器只在表单调用 checkValidity() 或用户点击 submit 时才触发 pattern 校验；它不阻止输入，也不实时高亮。常见误操作包括：
- 漏写
title属性：没有title，校验失败时只弹系统级英文提示（如 “Please match the requested format”），用户完全看不懂 - 正则未锚定：写成
pattern="a-z"会匹配任意含小写字母的字符串，正确应为pattern="[a-z]+"或更严格地pattern="^[a-z]{3,16}$" - 忽略大小写敏感：默认区分大小写，要忽略需加
i标志，但 HTML 原生pattern不支持标志位，只能写进正则里，如pattern="[A-Za-z0-9_]{3,16}" - 把
pattern当成maxlength用：它不控制长度，只校验格式；超长仍可输入，提交时才报错
pattern 和 type、inputmode 的分工关系
三者解决不同层面的问题，混用反而容易冲突：
-
type="email"或type="tel"：触发原生语义化键盘 + 基础格式预检（如type="email"会检查是否含 @），但校验宽松，user@都能过 -
pattern：做精确格式约束，比如要求邮箱带特定域名、手机号必须 11 位纯数字，但它不改键盘类型 -
inputmode="numeric"或inputmode="email"：显式指定软键盘类型，优先级高于type，但 Safari 对inputmode支持滞后（iOS 16.4+ 才稳定） - 典型组合：手机号用
type="tel" inputmode="numeric" pattern="[0-9]{11}" title="请输入11位数字手机号"
移动端和屏幕阅读器对 pattern 的实际支持差异
别假设所有设备行为一致：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari：支持
pattern校验，但失败提示框常被键盘遮挡；title文本会被 VoiceOver 读出，前提是label已正确关联 - Android Chrome：校验正常，但部分国产浏览器（如微信内置 X5 内核）会忽略
pattern，只认type - 辅助技术依赖
label+id关联：如果没写label for="phone"和input id="phone"，即使pattern触发错误，屏幕阅读器也说不出“手机号格式错误” - 不要用
placeholder替代title：前者不参与校验，后者才是错误提示的唯一来源
真正难的不是写出一个正则，而是让 pattern 在微信里弹出中文提示、在 VoiceOver 下说出字段名、在旧安卓机上不静默失效——这些都得靠 label、title、服务端兜底三者咬合到位。
