使用: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 在聚焦错误字段时加强提示，比如加深红或添加浅红阴影。
立即学习“前端免费学习笔记（深入）”；
对于高级需求（如失去焦点后才提示），可结合 JS 添加自定义类，但纯 CSS 的 :invalid 方案已能满足很多场景。
基本上就这些。不复杂但容易忽略细节。
