:user-invalid比:invalid更实用，因它仅在用户交互且值不合法时生效，避免页面加载即触发校验；启用需满足：带原生校验属性、CSS直写input:user-invalid、现代浏览器支持；降级用input:not(:placeholder-shown):invalid；JS同步需调用setCustomValidity()。
为什么:user-invalid比:invalid更实用
因为 :invalid 在页面加载完成时就匹配空的 required 字段，用户还没点进去，所有必填框已经红边满屏——这不是 bug，是规范行为。而 :user-invalid 只在用户真正与字段交互（输入、粘贴、聚焦后失焦等）且当前值不合法时才生效，视觉反馈完全对齐用户操作流。
如何正确启用:user-invalid样式
必须同时满足三个条件，缺一不可：
-
<input>元素需带原生校验属性，比如required、type="email"、pattern="[0-9]{6}"（注意：不要加正则斜杠） - CSS 中直接使用
input:user-invalid，不能和:valid/:invalid混写，也不能加冗余 class（如.error:user-invalid） - 浏览器支持：Chrome 102+、Firefox 119+、Safari 17.4+；旧版 Safari（iOS 16 及更早）完全不识别，会静默忽略该规则
兼容性 fallback 怎么写才不翻车
如果项目要支持 Safari 16 或安卓 WebView，不能只靠 :user-invalid。推荐用 :not(:placeholder-shown) 作为降级方案，但要注意前提：
- 每个
<input>必须有placeholder属性（哪怕只是空格placeholder=" "） - 写法必须是
input:not(:placeholder-shown):invalid，顺序不能颠倒，否则无效 - 这个组合无法覆盖“用户输完又删光”的场景（此时 placeholder 重新显示，样式消失），但比纯
:invalid好得多
自定义校验结果怎么同步到:user-invalid
:user-invalid 只响应 Constraint Validation API 的状态，JS 改 value 或 class 完全无效。关键操作只有两步：
立即学习“前端免费学习笔记（深入）”；
- 调用
input.setCustomValidity("用户名已存在")设置错误信息（传非空字符串即触发:user-invalid） - 校验通过时必须显式重置：
input.setCustomValidity("")（漏掉这句，状态会卡死） - 不需要手动调用
checkValidity()或reportValidity()——:user-invalid会在下次渲染周期自动响应 setCustomValidity 的变更
最易忽略的一点：即使你用了 :user-invalid，也得确保表单控件参与了原生校验。一个 type="text" + required 的输入框，在用户清空内容后仍会匹配 :user-invalid；但若只靠 JS 校验邮箱格式却没设 type="email"，那它永远进不了 :user-invalid 流程。
