pattern属性错误写法是加斜杠如"/[0-9]{6}/"，应改为"[0-9]{6}"；需配合required等验证属性触发:invalid；空值误触发可用input:invalid:not(:placeholder-shown)解决。
pattern属性写法错误导致:invalid不触发
最常见的情况是把正则当字符串写了斜杠：pattern="/[0-9]{6}/" ❌。浏览器会直接忽略这个 pattern，相当于没加约束，:invalid自然不会匹配。正确写法是去掉前后斜杠：pattern="[0-9]{6}" ✅。它不是 JS 的 RegExp 构造，只是正则字面量字符串。
还要注意锚点问题：如果写 pattern="a"，输入 "abc" 也会通过（子串匹配），应强制全匹配：pattern="^a$" 或更常用 pattern="^[a-zA-Z0-9_]{3,20}$"。
:invalid样式没反应？先确认是否参与原生校验
:invalid 不是“只要值不对就生效”，它只响应 Constraint Validation API 的状态。没有 required、type、min、max 或 pattern 等验证属性的 <input type="text">，永远是 :valid —— 浏览器根本不校验它。
- 必须同时满足两个条件：有
pattern属性 + 当前值不匹配该正则 -
pattern单独存在即可触发:invalid，不需要额外加required（但加了会叠加逻辑：空值也触发） - 移动端软键盘可能不触发
blur，导致失焦校验延迟；可监听change或手动调用input.reportValidity()
避免页面一加载就全红：用:not(:placeholder-shown)兜底
空值 + pattern 不会立刻触发 :invalid（和 required 不同），但一旦用户输错内容，:invalid 就会立即生效。真正容易误伤的是那些带 required 又带 pattern 的字段——页面加载完空着，:invalid 立刻命中。
解决方法很直接：input:invalid:not(:placeholder-shown)。前提是给 input 加上 placeholder 属性（哪怕只是空格 placeholder=" "），这样初始时 :placeholder-shown 为真，:not(:placeholder-shown) 就是假，样式不应用。
更现代的方案是 input:user-invalid（Chrome 102+ / Firefox 119+ / Safari 17.4+），但它在旧版安卓 WebView 和部分 Safari 中不可用，上线前务必实测。
边框变色被覆盖？优先级和过渡要小心
写 input:invalid { border-color: #e53e3e; } 很容易被其他规则干掉，比如框架的 .form-control:focus 或全局重置的 border。建议显式提高特异性：
- 用
input:invalid:not(:placeholder-shown)替代单纯:invalid - 避免写
transition: border-color 0.2s—— 错误反馈需要即时，加动画反而模糊信号 - 如果用了
outline: none，记得补上input:focus { box-shadow: 0 0 0 2px #3182ce; }，否则键盘用户无法感知聚焦状态
最后提醒一句：pattern 校验完全走浏览器原生逻辑，不执行 JS，也不发请求。服务端返回“用户名已存在”这类业务错误，必须用 setCustomValidity("...") + reportValidity() 才能让 :invalid 更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
