:invalid伪类不生效是因为浏览器仅在提交、blur或调用checkValidity()时更新状态；需在input和blur事件中主动调用checkValidity()，并合理使用setCustomValidity('')清空自定义错误以同步校验逻辑。
input 元素的 :invalid 伪类为什么有时不生效
因为浏览器不会在页面加载后自动更新 :invalid 状态，它只在表单提交、blur 或显式调用 checkValidity() 后刷新。哪怕写了 required，用户没动过输入框时，它的 validity.valid 仍是 true，:invalid 自然不匹配。
常见错误是只靠 CSS 写了 input:invalid { border-color: red; } 就以为万事大吉，结果用户输错内容后边框还是绿的。必须配合 JS 主动触发校验：
- 在
input和blur事件中都调用element.checkValidity() - 不要依赖
reportValidity()做实时反馈——它会弹原生气泡，打断操作 -
checkValidity()本身不改变 DOM，但能推动:invalid伪类重新计算
如何让自定义错误提示和 :invalid 样式同步
一旦你用了 setCustomValidity('') 清空或设置文案，就会影响 validity 对象的内部状态。尤其当设了非空字符串后，validity.customError 变为 true，其他校验项（如 valueMissing、typeMismatch）就全被屏蔽了——:invalid 虽仍生效，但你无法再靠 validity.typeMismatch 判断是不是邮箱格式错。
所以同步的关键在于“清空时机”和“重判逻辑”：
立即学习“前端免费学习笔记（深入）”；
- 每次
input事件里无条件调用element.setCustomValidity('') - 在
invalid事件里，先检查element.validity.valueMissing、element.validity.typeMismatch等具体字段，再设对应文案 - 避免只监听
blur后设错——用户可能根本没失焦就提交了
错误提示 DOM 结构和 CSS 控制要点
错误文案不能塞进 title 或 placeholder，移动端不可见，也不满足可访问性要求。正确做法是：每个 <input> 后紧跟一个同级兄弟节点，比如 <div class="error" role="alert"></div>。
样式控制要避免布局跳动：
- 用
visibility: hidden+ 类名切换，别用display: none—— 否则输入框上下元素会“抽搐” - 给每个
input加data-error-target="#error-email"，JS 里用el.dataset.errorTarget精准定位提示元素 - 错误提示默认隐藏，仅当父容器有
is-invalid类时才显示：.is-invalid + .error { visibility: visible; }
type 属性写错会导致 :invalid 完全失效
type 拼错（比如 emial、num）或选错类型（比如手机号用 number），浏览器会降级为 type="text"，所有原生校验逻辑（包括 :invalid 触发条件）全部丢失。
典型表现是：输入 “abc” 到标了 type="email" 的框里，边框不红、没气泡、checkValidity() 返回 true。
- 检查是否拼写正确：
email、url、number、tel等都是固定关键字 - 手机号别用
number——它不允许空格、短横线，且部分浏览器对“11位数字”无强制 - 需要兼容旧版 IE？
date、datetime-local这类控件得搭配 JS fallback，不能只靠:invalid
真正难的不是写对一行 CSS，而是理解 validity 状态怎么被浏览器维护、又被 JS 干预；稍不留神，setCustomValidity('') 就卡住整个校验链，:invalid 就成摆设。这些状态流转细节，恰恰是调试时最常卡住的地方。
