css 表单错误信息怎么自动显示_通过 invalid 伪类联动提示_技术教程

不能。:invalid 仅标记校验失败状态，不自动显示提示；需配合兄弟选择器（如 + 或 ~）控制同级隐藏元素显隐，或用 :user-invalid 实现用户交互后提示，但无法动态输出错误文案或响应后端校验。

input:invalid 伪类能直接显示错误提示吗？

不能。浏览器只在表单控件校验失败时自动添加 :invalid 状态，但不会主动渲染任何提示文字——它只是个状态标记，不带 DOM 输出能力。想“自动显示”，必须配合其他机制，比如用 :invalid + .error-message 控制相邻元素可见性，或用 :invalid:focus ~ .error-message 触发后续提示。

怎么用 :invalid + 同级兄弟选择器联动提示文本？

这是最轻量、无需 JS 的方案，前提是 HTML 结构中错误提示元素紧挨在表单控件之后，且是同级兄弟节点。关键点在于：提示元素必须默认隐藏，再通过伪类组合控制显隐。

:invalid 只对设置了 required、type="email"、pattern 等原生校验属性的元素生效
提示元素必须用 +（相邻兄弟）或 ~（一般兄弟）连接，不能跨层或反向
不要依赖 :invalid:valid 这类矛盾写法——浏览器不支持
注意表单初始加载时可能已处于 :invalid 状态（如空的 required 输入框），提示会立即显示，体验突兀，建议加 :user-invalid 或结合 :focus

.form-control:invalid + .error-message {
  display: block;
}
.form-control:not(:user-invalid) + .error-message {
  display: none;
}
.form-control:valid + .error-message {
  display: none;
}

为什么 :user-invalid 比 :invalid 更适合真实场景？

:invalid 在页面加载完成就计算一次，哪怕用户还没输过内容，空的 required 输入框也会立刻触发，导致提示“闪现”。:user-invalid 是 CSS Selectors Level 4 新增伪类，仅在用户与控件交互后（如输入、失焦、提交）才激活，更符合“用户出错后提示”的直觉。