:user-invalid 是浏览器自动应用的伪类，仅在表单控件有 required 或 pattern 属性、用户已交互且原生验证失败时生效，不支持自定义正则逻辑，也不实时响应输入。
:user-invalid 本身不是正则检测工具，它只是浏览器在表单控件处于“用户已交互但验证失败”状态时自动应用的伪类——不支持自定义正则逻辑，也不触发正则匹配。
为什么 :user-invalid 看起来像“正则检测”
很多人误以为它能配合 pattern 属性做正则高亮，其实只是浏览器把 pattern 的校验结果（成功/失败）映射到了这个伪类上。它的触发完全依赖原生表单验证流程：
- 元素必须有
required或pattern属性 - 用户必须聚焦过该字段并失去焦点（
blur），或提交表单 - 浏览器内部用 JS 式正则引擎执行
pattern值（如/^\S+.*$/），不支持标志位如i、g - 仅当验证失败且用户已操作过，
:user-invalid才生效
pattern 的正则写法限制很实际
HTML5 pattern 实际等价于 ^regex$ 全匹配（隐式锚定），你写的正则不需要、也不能加 ^ 和 $ —— 浏览器会自动加上。常见踩坑点：
- 写
pattern="^\d+$"→ 实际变成^^\d+$$，永远不匹配 - 想允许开头空格但禁止纯空格？
pattern="\S.*"不行，因为\S会拒绝首字符为空格；得用pattern="^\s*\S.*$"（但别加外面的^$！正确写法是pattern="\s*\S.*"） - 中文支持要显式写 Unicode 范围：
pattern="[\u4e00-\u9fa5a-zA-Z0-9_]+" - 小数校验不能只靠
pattern="\d*\.?\d+"，它无法阻止.123.这种结尾点；更稳妥的是结合type="number"+ JS 监听
真正可控的“正则响应式样式”得靠 JS + class 切换
如果需要实时反馈（比如输入时就变红）、支持复杂正则（带标志、分组、动态生成），或者兼容老浏览器，必须用 JS 主动控制 class：
- 监听
input事件，用new RegExp(pattern).test(value)手动校验 - 匹配失败时加
class="invalid"，再用 CSS 写.invalid { border-color: #f00; } - 注意避免高频重绘：对长文本或复杂正则，可加
requestIdleCallback或节流 - 不要只依赖
onkeyup—— 粘贴、拖入、语音输入等行为不会触发它，要用input事件
最易被忽略的一点：CSS 的 :user-invalid 在 Safari 中直到 iOS 16.4 / macOS Ventura 13.3 才稳定支持，且不响应 input 实时变化；而 JS 方案可控、可测、可 debug，复杂场景下几乎没有替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
