:valid在页面加载时即根据当前值是否满足约束实时匹配，空required输入框初始为:invalid；:user-valid需用户完成focus→blur交互且值有效才生效，不响应初始状态。
user-valid 和 :valid 的触发时机本质不同
:valid 只反映「当前值是否满足所有已声明的约束」，不关心用户有没有操作过。页面一加载，<input required> 是空的，就立刻匹配 :invalid；填了内容又删空，部分浏览器（如 Safari）甚至会回退到 :valid——这不是 bug，是规范定义的状态快照。
:user-valid 则多了一层交互前提：必须发生过 focus → blur（或等效交互），且当前值通过校验，才会匹配。它不响应初始状态，也不响应未失焦的中间输入，只对「用户明确操作过 + 当前有效」生效。
为什么刚打开页面就看到绿色边框？一定是用了 :valid
常见误用场景：
-
<input type="email" required>加了input:valid { border-color: green; }→ 页面渲染完瞬间就绿，因为浏览器认为“空值没违反任何 pattern，且 required 不强制非空” -
<input pattern="[0-9]{6}">但没加required→ 空值永远:valid，用户还没输就绿了 - 想靠
:valid显示成功图标，结果 placeholder 还在时就触发了 —— 必须加:not(:placeholder-shown)才能规避
:user-valid 的兼容性与降级方案
:user-valid 和 :user-invalid 在 Chrome 102+、Firefox 119+、Safari 16.4+ 完全支持。但 Safari 16.3 及更早版本不识别，会直接忽略该规则。
安全做法是双写：
input:user-valid,
input.touched:valid {
border-color: #388e3c;
}
然后用 JS 控制 touched 类：
- 监听
input或blur事件，给元素加touched - 提交失败后，遍历所有
invalid字段并统一加touched，确保反馈一致 - 别依赖
:focus:valid做判断——聚焦后删空，它仍可能匹配，逻辑断裂
真正容易被忽略的是：:user-valid 不响应 setCustomValidity()
自定义校验（比如用户名是否已存在）调用 setCustomValidity("已占用") 后，:user-invalid 会生效；但一旦调用 setCustomValidity("") 清除错误，:user-valid 并不会自动出现——它只认「原生约束 + 用户交互」这个组合。
如果需要自定义逻辑也触发 :user-valid，唯一办法是：确保字段有原生约束（如 required），再配合 reportValidity() 强制重算状态，否则样式不会更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
