CSS :invalid 伪类可自动为校验失败的表单控件添加样式，需配合 required、type="email"、min/max、pattern 等约束属性生效；注意初始空值即触发问题，推荐用 .touched 类或 :user-invalid 延迟提示，并结合 JS 或 ARIA 提供错误文案。
可以利用 CSS 的 :invalid 伪类自动为校验失败的表单控件添加提示样式，无需 JavaScript 干预，但需注意其触发条件和局限性。
确保表单控件有校验约束
:invalid 只在元素存在内置校验（如 required、type="email"、min/max、pattern 等）且当前值不满足时生效。没有校验属性的输入框即使为空也不会被识别为 :invalid。
- 给输入框加上
required属性：red> -
邮箱字段用
type="email"：ail" required> - 数字范围加
min="1" max="100"，或自定义格式加pattern="[0-9]{6}"
用 :invalid 设置视觉反馈
直接为 :invalid 定义边框、背景或图标等样式，让用户一眼识别问题项：
- 红色边框：
input:invalid { border-color: #e53e3e; } - 轻微红底：
input:invalid { background-color: #fff5f5; } - 配合伪元素加警告图标：
input:invalid::after { content: "⚠"; color: #e53e3e; margin-left: 4px; }（注意：::after对无效，可改用父容器 +::before或额外）
避免用户未输入就高亮（优化体验）
默认情况下，页面加载后空的 required 输入框会立即显示 :invalid 样式，影响体验。可通过结合 :user-invalid（现代浏览器支持）或 JS 控制 class 来延迟提示：
立即学习“前端免费学习笔记（深入）”；
- 推荐方案（兼容性好）：初始不设
:invalid样式，监听blur或submit后给表单加.touched类，再写.touched input:invalid - 前沿方案：使用
input:user-invalid替代:invalid，它只在用户编辑过且值非法时触发（Chrome 102+、Firefox 119+、Safari 16.4+ 支持）
补充错误文案需靠 HTML + JS 或 aria-live
:invalid 仅控制样式，无法生成文字提示。若需显示“邮箱格式不正确”这类消息，仍需：
- 在输入框旁放
，用 JS 在checkValidity()为 false 时填入提示 - 通过
aria-invalid="true"和aria-describedby关联错误区域，提升可访问性 - 提交时遍历
form.checkValidity()，统一高亮并提示
