pattern仅用于提交时粗筛且受限于type，合法性校验必须用JavaScript监听事件+RegExp.test()主动判断，否则无法处理粘贴、IME输入等场景及不可见字符。
原生 pattern 属性只能做提交时的粗筛，且仅对特定 type 生效；真正要校验输入内容合法性，必须用 JavaScript 监听事件 + RegExp.test() 主动判断——否则你永远不知道用户粘贴了全角空格、零宽字符，或在中文输入法状态下敲出了非法符号。
为什么 pattern 不能当“合法性校验”用
pattern 的作用被严重高估。它只在表单提交或调用 checkValidity() 时触发，不响应 input 事件；不处理粘贴、拖入、IME 输入等边界行为；且浏览器会自动给你的正则加上 ^ 和 $，你写 pattern="^[a-z]{3,}$" 实际等价于 pattern="^[a-z]{3,}$"（重复锚点），旧版 Safari 可能直接跳过整条规则。
-
pattern对type="number"、type="date"完全无效——值早已被转成数字或 Date 对象，正则收不到原始字符串 - 它不识别
d、w等简写（部分 Safari/IE 兼容差），推荐用[0-9]、[a-zA-Z0-9_] - 错误提示完全依赖
title，没设就只显示“请与所要求的格式匹配”，用户根本没法修正
input 事件里怎么安全调用 RegExp.test()
实时校验不是“每按一次键就跑一遍复杂正则”，而是分层响应：清洗 → 初筛 → 深度校验。重点是避免在中文输入法未完成上屏时误判。
- 监听
input做轻量清洗：value.replace(/[^0-9+-s()]/g, '')，去掉明显非法字符，但暂不报错 - 真正校验逻辑建议放在
blur或submit时执行，避免频繁创建正则对象（提取为常量） - 别用
/g标志：/g会让test()维护lastIndex，连续调用可能偶发失败 - 动态正则（如用户自定义规则）必须用
new RegExp(string)，注意双转义：new RegExp("^" + userInput + "$")中的要写成\
手机号、邮箱、密码这类高频场景的真实写法
别照抄网上“万能正则”。真实业务中，正则只是第一道过滤网，后面必须接清洗、长度判断、甚至后端解析。
立即学习“前端免费学习笔记（深入）”；
- 手机号宽松初筛：
/^1[3-9][0-9]{9}$/（国内 11 位），但需配合清洗：先value.replace(/[s-()]/g, "")再校验 - 邮箱别用超长环视正则：
/(?=.*@)(?=.*.)[^s@]+@[^s@]+.[^s@]+/，Safari 14 以下直接失效；基础写法/^[^s@]+@[^s@]+.[^s@]+$/更稳 - 密码强度不要只靠一个正则：
/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/.test(value)拆成多个独立判断，方便分别提示“缺小写字母”“缺数字” - 所有前端校验都绕不开不可见字符：用户粘贴的
u200b（零宽空格）、全角数字、emoji 都会导致test()返回true但业务解析失败
最常被忽略的一点：正则永远只管“字符串是否匹配”，不管“语义是否合法”。比如 12345678901 过得了手机号正则，但可能是废号；test@example.com 过得了邮箱正则，但域名根本不存在。真正的合法性，得靠后端调用号码库、DNS 查询或发送验证邮件来确认。
