:valid 和 :invalid 伪类仅对含校验属性（如required、type="email"）的表单控件生效，不依赖JS；需配合checkValidity()与classList手动同步状态实现输入时实时反馈，且注意Safari兼容性及样式优先级问题。
为什么 :valid 和 :invalid 看似生效却没反应？
因为这两个伪类只作用于有校验属性（如 required、type="email"、min/max）且浏览器原生支持校验的表单控件。纯 input 不加任何约束，哪怕绑了 JS 也不会触发 :invalid。
- 必须至少带一个校验相关属性：比如
required、type="number"、pattern="\d{6}" -
type="text"即使内容为空，也不会被标为:invalid—— 它默认无校验逻辑 - 自定义校验（如用
setCustomValidity()）后，需手动调用reportValidity()或触发表单提交，才能让伪类更新
怎么让错误提示在输入时就显示，而不是等提交？
浏览器默认只在提交或失去焦点（blur）时更新 :valid/:invalid 状态。要实现“边输边验”，得靠 JS 主动触发校验并配合 CSS。
- 监听
input事件，对每个字段调用checkValidity() - 用
classList.toggle("invalid", !el.checkValidity())手动同步状态到 class，再写.invalid { … }规则 - 不推荐只依赖
:invalid做实时反馈 —— 它本身不响应input，仅响应校验状态变更（而变更通常滞后）
示例：
<input type="email" required id="email"><span class="error">邮箱格式不对</span>
搭配：
email.addEventListener('input', () => {
const isValid = email.checkValidity();
email.classList.toggle('is-invalid', !isValid);
error.style.display = isValid ? 'none' : 'inline';
});
:valid 和 :invalid 的样式优先级与继承问题
它们是伪类，权重和 :hover 相同（10），但容易被更具体的规则覆盖，尤其当和 [class] 或 #id 混用时。
- 别写
input.valid:valid这种冗余组合 ——:valid本身已表明状态，加 class 反而增加维护成本 - 如果用了
!important强制样式，后续 JS 切换 class 很可能失效 - 注意表单重置（
的reset()）会清空所有校验状态，包括:invalid标记，但不会清除你手动加的 class
兼容性坑：Safari 对 :invalid 的特殊处理
Safari（尤其 iOS 15–16）在页面加载时，会对空的 required 字段立即应用 :invalid，导致用户还没输入就看到红框 —— 这和 Chrome/FF 行为不一致。
- 临时解法：用
:user-invalid替代（仅 Safari 支持，且只在用户交互后生效） - 更稳方案：初始时给 input 加
class="untouched"，JS 在首次input或focus后移除，CSS 写成.untouched:invalid { outline: none; } -
:valid在 Safari 中同样受此影响 —— 空字段永远不会匹配它，哪怕填了又删，也可能残留:valid状态
实际用起来最麻烦的不是写对伪类，而是搞清“当前这个字段到底有没有被浏览器认为需要校验”——多看一眼 el.validity 对象里的 valid、valueMissing、typeMismatch 字段，比反复调样式快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
