使用css伪类:valid和:invalid结合:placeholder-shown可实现无javaScript的表单验证；通过border颜色变化和伪元素提示反馈输入状态，配合transition提升交互流畅度，适用于轻量级项目。
在 CSS 中实现表单输入验证提示，可以通过结合 html5 的表单验证功能和 CSS 伪类来完成。不需要 javascript 就能显示简单的错误或成功状态提示，提升用户体验。
使用 :valid 和 :invalid 伪类
html5 表单元素在填写不符合规则时会自动标记为无效。CSS 提供了 :valid 和 :invalid 伪类来分别匹配有效和无效的输入状态。
例如，一个必填邮箱输入框：
<input type=”email” required placeholder=”请输入邮箱”>
可以这样添加样式：
立即学习“前端免费学习笔记（深入）”；
input:invalid { border: 2px solid #f44336; /* 红色边框表示错误 */ outline: none; }
input:valid { border: 2px solid #4CAF50; / 绿色边框表示正确 / }
配合 :placeholder-shown 控制初始状态
页面刚加载时，如果输入框为空，也会被识别为 :invalid，导致一开始就显示红框。为了避免这种情况，可以结合 :placeholder-shown 来控制只有在用户输入后才触发样式变化。
input:invalid:not(:placeholder-shown) { border-color: #f44336; }
input:valid { border-color: #4CAF50; }
这样，只有当占位符消失（即用户开始输入）后，验证样式才会生效。
添加自定义提示信息（伪元素模拟）
CSS 不能直接操作浏览器默认的提示气泡，但可以用伪元素模拟提示文字。
例如，在输入框下方显示错误提示：
input:invalid:not(:placeholder-shown):focus { border-color: #f44336; }
input:invalid:not(:placeholder-shown):focus + .hint { opacity: 1; visibility: visible; }
.hint { position: absolute; background: #f44336; color: white; font-size: 14px; padding: 4px 8px; border-radius: 4px; margin-top: 4px; opacity: 0; visibility: hidden; transition: all 0.3s; }
HTML 结构示例：
<div style=”position: relative;”> <input type=”email” required placeholder=”请输入邮箱”> <span class=”hint”>请输入有效的邮箱地址</span> </div>
增强体验：:focus 和过渡动画
加入 :focus 判断可以让提示只在用户聚焦输入框并离开后显示。同时使用 transition 让边框颜色和提示出现更自然。
input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; transition: border-color 0.3s; }
基本上就这些。通过合理使用 CSS 伪类和结构，可以在不写 js 的情况下实现简洁直观的表单验证提示。虽然功能有限，但对于轻量级项目已经足够实用。