纯 CSS 控制表单状态反馈可行，但需原生校验属性和 :has() 支持（Chrome 105+、Firefox 121+、Safari 15.4+）；否则需 JS 补位，:valid/:invalid 依赖 HTML5 校验逻辑，初始误判可用 :invalid:not(:placeholder-shown) 排除。
纯 CSS 控制表单状态反馈是可行的，但必须满足两个前提：使用原生校验属性（required、type、pattern 等），且浏览器支持 :has()（Chrome 105+、Firefox 121+、Safari 15.4+）。不满足时，仍需 JS 补位。
用 :valid 和 :invalid 控制输入框自身样式
这两个伪类依赖 HTML5 原生校验逻辑，不是靠 JS 判断。只要写了 required 或 type="email"，浏览器就会自动触发校验并更新状态。
常见错误现象：input:invalid 一加载就生效，导致空输入框初始就是红色边框。
- 用
:invalid:not(:placeholder-shown)排除 placeholder 还在显示时的误判 -
type="number"的空值默认算:valid，得加required才能触发:invalid - 移动端 Safari 对
pattern的匹配行为略有差异，建议配合title提供友好提示
用 :has(input:invalid) 高亮整个表单项容器
这是目前最干净的“父容器响应子状态”方案，无需监听事件、无需操作 class。前提是容器元素是 input 的祖先（不一定是直接父级）。
立即学习“前端免费学习笔记（深入）”；
示例结构：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<div class="form-group"> <label>邮箱</label> <input type="email" name="email" required> <div class="error-message">请输入有效邮箱</div> </div>
CSS 写法：
.form-group:has(input:invalid) {
border: 2px solid #dc3545;
}
.form-group:has(input:invalid) .error-message {
display: block;
}
- 注意：不能写成
.form-group:has(:invalid)——:invalid必须带元素名，否则无效 - 如果表单项嵌套了多层（比如
<div><div><input></div></div>），:has()依然能跨级匹配 - IE 和旧版 Edge 完全不支持
:has()，如需兼容，只能回退到 JS 方案
区分校验中、校验失败、校验通过三种状态
原生伪类只提供 :valid/:invalid 二元状态，异步校验（如用户名唯一性）必须靠 JS 注入临时状态类。
关键点在于避免覆盖原生状态：
- 不要用
is-invalid直接替换:invalid，而是叠加：让 JS 加is-pending，CSS 写.form-group.is-pending input显示 loading 动画 - 远程校验返回后，先移除
is-pending，再根据结果加is-invalid或is-valid -
:invalid:not(:placeholder-shown)和.is-invalid可以共存，用后者控制更细粒度的 UI（比如图标、文字颜色）
提交时的全局反馈和防重复提交
表单 submit 事件本身不触发 :valid/:invalid 重算，需手动调用 form.checkValidity() 触发原生校验流程。
实操建议：
- 监听
submit事件，调用event.preventDefault()阻止跳转 - 立即给
button[type="submit"]加disabled属性，并切换文案为“提交中…” - 若校验失败，浏览器会自动聚焦第一个
:invalid元素，无需额外滚动逻辑 - 成功提交后，清空表单用
form.reset()，比逐个设value = ''更可靠
容易被忽略的是：form.reset() 不会清除通过 JS 添加的 class（如 is-pending），这些需要手动清理，否则下次提交时状态错乱。
