通过CSS伪类:invalid和:valid实现表单实时验证，结合颜色、边框、图标与transition动画，使用--error-color和--valid-color变量区分状态，配合:not(:placeholder-shown)避免占位符干扰，利用.form-group与:has()控制错误信息显示，内联SVG图标提升可读性，最终无需JavaScript即完成友好验证交互。

使用 :invalid 伪类提升表单验证体验

通过 CSS 的 :invalid 和 :valid 伪类，可以在用户输入时实时提供视觉反馈，无需 JavaScript 即可实现基础验证提示。关键在于结合颜色、边框、背景和图标，让用户快速识别错误。

颜色与边框强化视觉区分

使用醒目的颜色突出无效输入：

• 红色系表示错误（如 #e53935），用于边框和提示文字
• 绿色系表示正确（如 #43a047），增强完成感
• 配合 box-shadow 添加轻微发光效果，提升交互层次
• 加入 transition 让样式变化更自然

避免 placeholder 干扰判断

初始空值不应显示为“错误”。使用 :not(:placeholder-shown) 可防止占位符存在时触发错误样式：

input:invalid:not(:placeholder-shown) { ... }

这样用户首次进入表单时不会被红色边框吓到，只有在输入后内容不合法才会提示。

结合结构展示自定义错误信息

利用父容器和 :has() 选择器控制错误消息显示：

word-chinese-automation

中文 Word 文档自动化校对工具。当用户需要对中文文本或 Word 文档进行标点符号检查、语法检查、错别字检查时使用此 skill。触发词：语法检查、错别字、标点符号、校对、检查文档。

下载

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

• 将输入框和提示信息包裹在 .form-group 中
• 使用 .form-group:has(input:invalid) 控制错误消息显隐
• 错误消息默认隐藏，仅在无效且非占位状态时显示

添加图标提升可读性

在输入框右侧嵌入小图标，进一步强化状态识别：

• 无效时显示感叹号或叉号图标
• 有效时显示对勾图标
• 使用 data URL 内联 SVG，避免额外请求
• 注意调整 padding-right 避免文本重叠

基本上就这些。合理运用伪类和视觉元素，能让表单验证更直观友好。