使用:invalid伪类可实现表单输入实时验证，结合border-color改变边框颜色提示错误。通过:not(:placeholder-shown)避免占位符显示时误触红框，用户输入非法内容即时显示红色边框，合法则变绿。添加transition使颜色变化平滑，:focus增强错误提示，基础场景无需JavaScript即可完成良好交互体验。

在网页表单中，使用 :invalid 伪类结合 border-color 是提示用户输入错误的常用方式。它无需 JavaScript 即可实现基础的实时验证反馈。

基本原理：利用 :invalid 伪类

浏览器会根据 input 的 type 和 required 属性自动判断输入是否合法。例如 email 类型必须符合邮箱格式，required 字段不能为空。

当输入内容不符合规则时，元素会匹配 :invalid 状态，此时可以设置特定样式，比如红色边框，提醒用户修正。

避免 placeholder 干扰提示

页面刚加载时，空的必填字段也会被视为“无效”，直接应用红框会影响体验。

使用 :not(:placeholder-shown) 可以排除占位符显示时（即用户尚未输入）的状态，只在用户开始输入但内容错误时才显示错误样式。

• 用户未输入：显示 placeholder，不触发红框
• 用户输入非法内容：如“abc”填入邮箱框，立刻显示红边框
• 用户输入合法内容：边框变绿，表示通过

增强用户体验的小技巧

加入 transition 让边框颜色变化更柔和。

配合 :focus 在聚焦错误字段时加强提示，比如加深红或添加浅红阴影。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

立即学习“前端免费学习笔记（深入）”；

对于高级需求（如失去焦点后才提示），可结合 JS 添加自定义类，但纯 CSS 的 :invalid 方案已能满足很多场景。

基本上就这些。不复杂但容易忽略细节。