pattern属性仅在表单提交时生效，需配合required和title使用；其值为正则中间部分（不加/^$/），仅对text类type有效，且必须后端校验。
pattern 属性只在表单提交时生效，且必须配合 required 和 title 才能真正起作用；它不是实时拦截器，也不是 JS 正则字面量——写错斜杠、锚点或转义，浏览器就直接忽略校验。
pattern 值怎么写才不会被浏览器无视
浏览器把 pattern 当作裸字符串处理，内部用 new RegExp(`^${attrValue}$`, 'u') 编译。你只需要写中间部分，别加 /、^ 或 $。
- ✅ 正确：
pattern="[0-9]{6}"（6位数字） - ✅ 正确：
pattern="1[3-9][0-9]{9}"（兼容旧版 Firefox，避免用\d） - ❌ 错误：
pattern="/^[0-9]{6}$/"（斜杠被当普通字符，永远不匹配） - ❌ 错误：
pattern="^[a-z]+$"（冗余且易因转义出错，比如^在属性值里可能被 HTML 解析器提前截断）
方括号内连字符 - 必须放开头或结尾：pattern="[a-zA-Z0-9_-]" 安全，pattern="[a-z-0-9]" 会报 Invalid character in character class。
为什么写了 pattern 却没反应
常见现象是用户随便输、没提示、提交也不拦——根本原因不是正则写错了，而是触发条件没满足。
立即学习“前端免费学习笔记（深入）”；
-
type必须是支持的文本类：只有text、tel、email、password、search、url有效；number、textarea、date完全无视pattern - 空值默认通过校验，必须加
required才能拦住不填或删空的情况 - 没写
title属性时，错误提示是“请输入符合指定格式的值”，用户根本不知道要输什么 - 校验只在
submit事件或调用checkValidity()时触发，input过程中不会标红、也不会阻止输入
移动端手机号输入怎么配才靠谱
单纯靠 pattern 拦不住粘贴、也唤不出数字键盘，得组合使用。
- 用
type="tel"触发 iOS 数字键盘（带 * #），但 Android Chrome 某些版本会绕过pattern校验，更稳的是type="text" inputmode="tel" - 手机号正则推荐
pattern="1[3-9][0-9]{9}"，别用\d（旧 Firefox 不认）、也别写^1[3-9]\d{9}$（^和$浏览器已自动加） -
inputmode="tel"不影响校验逻辑，只优化键盘；但和pattern搭配才能兼顾体验与约束 - iOS Safari 对
title提示支持弱，hover 不弹，必须用 JS 监听invalid事件 +setCustomValidity()补提示
后端还用校验吗？当然要
pattern 是前端轻量过滤，不是安全边界。用户可以禁用 JS、改 DOM、curl 绕过表单直接 POST——所有字段仍需服务端完整验证。
比如身份证 pattern 只能检查位数和末位是否为 X，校验码算法必须后端算；邮箱正则再长也替代不了 DNS 查 MX 记录；手机号 pattern 更不判断号段有效性或运营商归属。
最容易被忽略的一点：setCustomValidity("") 必须在每次 input 或 change 时重置，否则合法输入仍被标记为 invalid——这是 JS 配合 pattern 时最常踩的坑。
