pattern属性无法处理复杂校验——它仅支持单字段、全字符串、提交时触发的静态匹配，不支持锚点、环视、Unicode类、跨字段比对及异步检查，实际应作为格式提示配合JavaScript校验使用。
单纯靠 pattern 属性做“复杂规则校验”行不通——它只支持单字段、全字符串、提交时触发的静态匹配，连大小写不敏感都难保证，更别说密码强度联动、跨字段比对或异步检查。
哪些正则规则 pattern 根本处理不了
浏览器对 pattern 的实现非常保守，以下场景它完全无能为力：
-
pattern不支持^和$锚点语法（浏览器自动加，你写了反而可能被旧 Safari 忽略） - 不支持环视（
(?=.*\d)这类在老 Safari、部分 Android WebView 中直接失效） - 不支持 Unicode 属性类（如
\p{L}）、g/m标志、条件表达式 - 无法校验“确认密码”是否等于“新密码”，也无法判断“邮箱域名不能是 gmail.com”
-
textarea、number、date、checkbox等类型压根不读取pattern属性
pattern 只适合当“格式提示”，不是校验主力
把它看作 placeholder 的增强版：告诉用户“大概长什么样”，而不是“必须满足什么逻辑”。实际可用的姿势是：
- 搭配
type="tel"或type="text" inputmode="numeric"用手机号正则：pattern="1[3-9]\d{9}" - 配
required+title，否则错误提示是模糊的“请与所要求的格式匹配” -
title必须写得具体，比如title="请输入6位数字，不要加空格或字母"，iOS Safari 里它还是唯一能稳定显示的提示 - 避免写
pattern="/^[0-9]{6}$/"或pattern="^[0-9]{6}$"，斜杠和显式锚点会破坏匹配
真正复杂规则，必须用 JavaScript 接管
用 RegExp.test() 做判断，配合 setCustomValidity() 控制反馈，才能落地。关键实操点：
- 正则写成字面量（
/^(?=.*[a-z])...$/），别用new RegExp("...")，省去双重转义麻烦 - 每次
input事件中先调用input.setCustomValidity("")清空旧状态，再根据结果设新消息 - 把正则提取为常量，同时用于
pattern属性（字符串形式）和 JS（字面量），避免两边行为不一致 - 跨字段校验（如两次密码）放在
submit事件里统一处理，别只监听单个输入框 - 异步校验（用户名是否已存在）必须用
fetch+setCustomValidity，且要处理 loading 状态防止重复提交
最易被忽略的一点：即使你 JS 校验写得再严密，pattern 属性若和 JS 正则不一致（比如 JS 用了 ^ 锚点而 pattern 没写），用户在某些浏览器里会看到“明明输对了却报错”的现象——因为两套逻辑实际执行的是不同规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
