:valid不实时更新是因为浏览器默认仅在blur或submit时触发校验，输入过程中需手动调用checkValidity()强制刷新状态，且仅对含required、type="email"等校验属性的元素生效。
:valid 不实时更新，它只反映浏览器当前缓存的校验状态；这个状态默认只在 blur 或表单 submit 时计算，不是每敲一个键就重算。
为什么输入过程中:valid不变化？
浏览器对 :valid 的判定依赖 Constraint Validation API 的内部状态，而该状态默认是 lazy 的：值变了，但没触发校验时机，状态就不更新。比如用户刚输一个字母，type="email" 的字段仍可能显示 :valid（因为还没失焦），直到 blur 才变成 :invalid。
-
required字段空着加载时就是:invalid，不是 bug，是规范行为 -
type="number"输入"12."瞬间变:invalid，因为中间态被判定为非法值 -
pattern正则匹配失败不会立刻触发:invalid，得等校验被显式调用
怎样让:valid在输入时“看起来实时”？
必须手动触发校验，最简方式是在 input 事件里调用 checkValidity()：
input.addEventListener('input', () => {
input.checkValidity(); // 强制刷新 :valid/:invalid 状态
});
- 别用
change事件——它等失焦，达不到“边输边验”效果 - 对异步校验（如用户名唯一性），
checkValidity()不够，得配合setCustomValidity()和后续调用 - 移动端要注意：软键盘回车或切换字段可能不触发
input，需额外监听change或blur
:valid生效的前提条件有哪些？
它只对参与原生校验的元素起作用，缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 必须带至少一个校验属性：
required、type="email"、pattern、minlength、min/max -
type="text"单独存在，:valid始终为true（无约束即无校验） -
type="phone"这类非标准 type 会被降级为text，:valid失效 -
pattern值不能带斜杠：pattern="[0-9]{6}"✅，pattern="/[0-9]{6}/"❌
真正容易被忽略的是：即使写了 input:valid { border-color: green; }，如果没加 required 或其他约束，样式永远不会应用——:valid 根本不匹配，连计算都不参与。
