pattern仅对text、search、url、tel、email、password类型input生效，不支持number、date和textarea；正则默认被当作^(?:...)$处理；必须配title提示；不能替代后端校验。
pattern 属性只对特定表单控件生效
pattern 不是万能的，它只在 <input type="text">、<input type="search">、<input type="url">、<input type="tel">、<input type="email"> 和 <input type="password"> 上起作用。对 type="number"、type="date" 或 <textarea> 使用 pattern 会完全被忽略——浏览器既不校验，也不报错。
常见错误是给手机号输入框设成 type="number" 后加 pattern，结果校验失效。正确做法是改用 type="tel"，它语义更准，且支持 pattern：
<input type="tel" pattern="[0-9]{11}" title="请输入11位手机号">
正则表达式默认隐含 ^ 和 $ 锚点
你写的正则不会被自动包裹，但浏览器内部会按 ^(?:your-pattern)$ 解释。也就是说，pattern="\d{3}-\d{4}" 实际匹配的是“整个字符串必须严格等于 3 位数字 + 短横 + 4 位数字”，而不是“包含这个子串”。这和 JS 的 test() 行为一致，但容易误以为像 includes() 那样宽松。
所以这些写法要注意：
立即学习“前端免费学习笔记（深入）”；
-
pattern="abc"→ 只接受“abc”三个字符，不是“abc123” - 要允许开头/结尾有空格？得显式写进正则：
pattern="^\s*abc\s*$" - 中文字符需注意 Unicode：用
\u4e00-\u9fa5或\p{Han}（但后者需pattern加u标志，而 HTMLpattern不支持标志位，只能用前者）
校验失败时用户看到的是 title 提示
当输入不满足 pattern，浏览器原生会阻止表单提交，并在焦点输入框上显示气泡提示——内容来自 title 属性，不是 pattern 值本身。没写 title，提示就可能是“请与所要求的格式匹配”这种笼统文案，体验很差。
实操建议：
- 每个带
pattern的<input>必须配title，用自然语言说明规则，比如title="密码需包含至少1个大写字母、1个小写字母和1个数字" - 避免把正则直接塞进
title，用户看不懂[A-Z][a-z]\d+ - 移动端 Safari 对
title气泡支持弱，部分机型不显示，得靠 JS 补充提示
pattern 无法替代后端校验，也不能处理逻辑依赖
pattern 是纯前端、纯格式层的检查，它不感知业务上下文。比如“确认密码”字段需要和“新密码”值一致，或者“结束日期不能早于开始日期”，这类校验 pattern 完全无能为力。
更要紧的是：任何前端校验都可被绕过。禁用 JS、直接发 POST、用 curl 构造请求……pattern 一碰就碎。所以：
- 后端必须做完整校验，规则和前端保持一致（别前端用 \d{6}，后端只检查长度）
- 敏感字段如密码强度、邮箱格式，后端要用相同正则或等效逻辑再跑一遍
- 不要用
pattern防注入——它不转义、不过滤，只做匹配
pattern 和 required 的组合行为：空值会先触发 required 报错，只有填了内容才走 pattern。如果想让“空”也符合某规则（比如允许为空，但非空时需满足邮箱格式），就得用 pattern="|^[^\s@]+@[^\s@]+\.[^\s@]+$" 这种带分支的写法。 
