:invalid伪类常失效，因浏览器仅在表单提交后才触发验证状态；初始空required输入框默认为valid，需JS调用checkValidity()并手动切换class实现可靠实时校验。
直接用 :invalid 伪类做必填提示，多数情况下会失效——因为浏览器默认只在表单提交后才触发 :invalid 状态，输入框刚加载或失焦未提交时，required 字段也可能是 :valid。
为什么 :invalid 常常不生效？
关键原因在于 HTML 表单的约束验证（constraint validation）机制：
- :invalid 依赖元素是否通过 checkValidity() 检查
- 初始加载时，空的 required 输入框**不自动标记为 invalid**，除非用户交互后提交过表单，或手动调用 reportValidity()
- 单纯聚焦/失焦（blur）不会触发状态更新
真正可用的实时校验方案
必须结合 JS 主动干预，让状态“提前就绪”：
- 给
input添加required属性，并监听input或blur事件 - 在事件中调用
element.checkValidity()，再根据返回值添加/移除自定义 class（如is-invalid） - CSS 改用该 class 控制样式，比纯依赖
:invalid可靠得多
input:required {
border-color: #ccc;
}
input.is-invalid {
border-color: #d32f2f;
background-color: #fff8f8;
}JS 示例（原生）：
document.querySelectorAll('input[required]').forEach(el => {
const updateValidity = () => {
el.classList.toggle('is-invalid', !el.checkValidity());
};
el.addEventListener('input', updateValidity);
el.addEventListener('blur', updateValidity);
});
:invalid 能用但有硬限制的场景
仅当满足以下全部条件时，:invalid 才能“看起来可用”：
立即学习“前端免费学习笔记（深入）”；
- 表单设置了
novalidate属性（禁用原生提交校验），否则提交后整个表单重置状态 - 用户已至少触发过一次
submit（哪怕被 JS 阻止），此时浏览器会批量标记所有无效字段 - CSS 同时覆盖
:invalid:not(:placeholder-shown)，避免 placeholder 存在时误判（Chrome/Firefox 行为不一致）
示例（脆弱但无需 JS）：
input:required:invalid:not(:placeholder-shown) {
border-color: #d32f2f;
}实际项目里，别赌浏览器对 :invalid 的初始状态判断——手动控制 class 是唯一稳定路径。尤其涉及动态增删字段、SPA 路由切换时，:invalid 的状态残留和延迟更新问题会更明显。
