:valid伪类仅对具备原生校验机制的表单元素生效，需含required、语义化type（如email/number）或pattern；空值在非required字段中默认valid，但type="email"为空时为invalid；状态由浏览器实时计算，不响应js直接改value；兼容现代浏览器但不支持ie；不可替代业务或后端校验。
valid伪类只对可校验的表单控件生效
:valid 不是万能的——它只作用于浏览器原生支持校验的元素，比如 <input type="email">、<input type="url">、<input type="number">、<input required>、<select required></select>、<textarea required></textarea>。普通 <input type="text">（无 required 且无类型约束）或自定义组件（如 React 封装的输入框）不会触发 :valid，因为它们没有校验逻辑参与。
常见错误现象：input[type="text"]:valid 一直不生效，或者样式始终不切换——大概率是因为该字段既没设 required，也没指定语义化类型，浏览器压根不把它当“可校验字段”看待。
- 必须带校验依据：要么有
required属性，要么有类型约束（如type="email"），或两者兼有 -
pattern属性也参与校验，比如<input pattern="[0-9]{3}">，匹配成功时会触发:valid - 注意：空值在非
required字段中默认视为:valid（除非有pattern或类型强制非空，如type="email"输入空字符串即为:invalid）
:valid 和 :invalid 的状态切换时机很具体
这两个伪类的状态不是靠 JS 主动设置，而是由浏览器根据当前值是否通过约束验证实时计算。关键点在于：它只看「当前值」是否满足所有已声明约束，不关心用户是否编辑过、是否失焦、是否提交过。
典型误判场景：用户刚输入一个非法邮箱（如 abc），:invalid 立刻生效；但删光内容后，type="email" 字段会变成 :invalid（因为空字符串不符合 email 格式），而 type="text" required 则会变回 :valid（空值 + required = invalid，所以删空后反而是 :invalid）。
立即学习“前端免费学习笔记（深入）”；
-
required字段：空值 →:invalid；非空 → 进入类型/pattern 校验流程 -
type="email"：空字符串 →:invalid；user@domain.com→:valid；@domain→:invalid - 状态更新是同步的，无需事件监听或 class 手动切换，但也不响应 JS 修改
value后的重校验（需触发input或change事件才能让浏览器重新评估）
样式优先级和兼容性要注意
:valid 是伪类，权重等同于类选择器（specificity 为 0,1,0），比标签选择器高，但低于 ID 或行内 style。容易被其他规则覆盖，尤其在 CSS-in-JS 或组件库默认样式里。
兼容性方面，Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+ 都支持，但 IE 完全不支持 —— 如果项目还需兼容 IE，不能只靠 :valid 做状态反馈。
- 推荐写法：
input:valid { border-color: #28a745; }，避免用input[type="email"]:valid叠加过多属性导致维护困难 - 慎用
!important：它可能掩盖真实的问题，比如本该由 JS 控制的“提交后才显示错误”，结果被:invalid提前触发 - 移动端 Safari 对
pattern校验支持较弱，某些正则可能不触发:valid切换，建议搭配简单类型（如tel、email）更稳妥
别把 :valid 当成业务校验替代品
:valid 只反映 HTML5 原生约束是否通过，和后端校验、业务规则（如“用户名不能包含敏感词”“手机号需归属某运营商”）完全无关。它无法处理异步校验，也不能读取 API 返回结果。
最常被忽略的一点：用户可能绕过前端限制直接提交。比如禁用 JS 后，:valid 样式还在，但表单照样能发出去；或者用 DevTools 删除 required 属性，样式失效但提交仍可进行。
- 视觉反馈只是辅助，
form.addEventListener('submit', ...)中仍需调用checkValidity()并阻止默认行为 - 服务端永远要做完整校验，
:valid的样式再准，也不能减少一次后端判断 - 如果用了
setCustomValidity()，它会覆盖原生校验结果，此时:valid行为取决于你传的字符串：空字符串 →:valid，非空 →:invalid
