应通过JS控制校验时机实现表单错误的即时友好提示：blur时添加is-invalid类并显示提示，focus时清除；:user-invalid比:invalid更符合用户操作后提示的直觉，但兼容性有限。
可以通过 :invalid 伪类配合 :focus 实现表单输入错误的即时提示，但要注意：原生 :invalid 在用户未交互前就可能触发（比如空必填字段），体验不自然。真正“即时”且友好的做法是“聚焦后失焦才校验 + 输入时动态反馈”，核心靠 JS 控制校验时机，CSS 只负责样式呈现。
用 :focus-within 或 JS 切换 class 控制提示显示时机
纯 CSS 方案中，:focus:invalid 能在输入框获得焦点且值非法时生效，但它无法区分“刚点进来还没输”和“输完错了”。更可控的方式是：用户离开当前输入框（blur）后，用 JS 给该元素添加 is-invalid 类；再用 CSS 配合该类显示提示：
-
HTML 示例：
<input type="email" required><br><span class="error-msg">邮箱格式不正确</span>
-
JS 监听 blur 并标记：
input.addEventListener('blur', () => {<br> if (!input.checkValidity()) input.classList.add('is-invalid');<br> else input.classList.remove('is-invalid');<br>}); -
CSS 显示错误提示：
input.is-invalid { border-color: #e74c3c; }<br>input.is-invalid + .error-msg { display: block; }
:invalid 和 :user-invalid 的区别要清楚
:invalid 是实时计算的，页面加载时若字段为空且为 required，它就会立即匹配——这常导致页面一开就红框，干扰用户。而 :user-invalid（目前仅 Chrome/Edge 支持）只在用户**修改过内容且校验失败后**才生效，更符合“用户操作后提示”的直觉。可作为渐进增强：
input:invalid { opacity: 0.8; } /* 所有无效状态都弱化 */input:user-invalid { border-color: #e74c3c; } /* 用户操作后才标红 */
结合 focus 实现“正在输入时的友好反馈”
用户聚焦输入框时，可提前清除旧错误提示、显示占位引导，提升体验：
立即学习“前端免费学习笔记（深入）”；
- 给
input:focus添加过渡或高亮背景，让用户明确当前操作目标 - 搭配 JS，在
focus时隐藏错误提示：input.addEventListener('focus', () => el.classList.remove('is-invalid')); - 如果支持
:focus-within（父容器），可用于整体高亮整个表单项：.form-item:focus-within { background-color: #f9f9f9; }
避免过度依赖纯 CSS 校验
原生表单验证（如 type="email"、pattern）虽方便，但提示文案不可控、兼容性有限、逻辑简单。实际项目中建议：
- 用
setCustomValidity()自定义错误信息，再配合reportValidity()主动触发 - 把校验逻辑统一收口，比如输入时节流校验、失焦时强校验、提交时全量校验
- CSS 只做视觉层：控制边框、图标、提示文字显隐，不承担判断责任
