答案：使用css伪类结合html5属性实现表单验证样式。通过:valid和:invalid配合not(:placeholder-shown)控制输入框边框与背景色，避免初始报错；利用相邻兄弟选择器+ .validation-message显示错误提示；JavaScript可增强交互，如blur时添加.show-message类，支持成功状态与过渡效果，提升兼容性与用户体验。
H3 使用伪类实现基础验证样式
p 在CSS中可以通过 :valid 和 :invalid 伪类来识别表单元素的验证状态。配合 :not(:placeholder-shown) 可避免页面加载时就显示错误样式。例如，给有效的输入添加绿色边框，无效的添加红色背景。
H3 结合html5约束与自定义提示
p 使用 required、pattern 等HTML属性触发浏览器验证。通过相邻兄弟选择器（+）控制紧跟其后的提示元素显示。比如：
- 输入为空或格式不符时，:invalid 生效
- 用户输入后才激活样式变化，避免初始报错
- 用 + .validation-message 控制错误信息显隐
H3 增强交互体验的小技巧
p 可通过JavaScript在失去焦点（blur）或提交时动态添加类名（如 .show-message），提升兼容性和控制力。同时支持展示成功状态提示：
- 为正确输入切换提示文字和颜色
- 利用 transition 添加淡入效果（需额外定义）
- 移动端注意提示区域高度避免跳动
基本上就这些。纯CSS能实现基本验证反馈，复杂场景建议结合JS控制类名。
