H5表单校验通过后可用微光闪烁或打钩动画做视觉反馈，核心是校验逻辑+CSS动画触发+时机控制；推荐用class控制状态，微光用box-shadow动画，打钩用SVG描边动画，并需防重复触发和兼顾无障碍。
在 H5 表单中，校验通过后用微光闪烁（glow effect）或打钩动画（checkmark animation）做视觉反馈，核心是：校验逻辑 + CSS 动画触发 + 时机控制。不依赖第三方库也能轻量实现。
1. 校验通过后动态添加成功状态类
不要直接操作内联样式，推荐用 class 控制状态。例如给输入框或其父容器加 .valid 类：
- 监听
input或blur事件做实时/失焦校验 - 校验通过时，移除错误类（如
.error），添加.valid - 可配合
dataset记录状态，避免重复触发动画
2. 微光闪烁：用 box-shadow + @keyframes
轻量、高性能，兼容性好（iOS Safari 也支持）：
@keyframes glow {
0% { box-shadow: 0 0 0 0 rgba(72, 190, 128, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(72, 190, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(72, 190, 128, 0); }
}
.valid {
animation: glow 0.6s ease-out forwards;
}
注意：forwards 确保动画结束后保留最终状态（无阴影），避免反复触发时叠加闪烁。
3. 打钩动画：SVG 图标 + 路径描边动画
比 PNG 更清晰，动画更可控。结构示例：
<div class="input-group">
<input type="text" id="email">
<svg class="check-icon" viewBox="0 0 24 24">
<path class="check-path" d="M4 12l5 5 10-10"/>
</svg>
</div>
CSS 控制描边动画：
.check-path {
stroke: #48be80;
stroke-width: 2;
fill: none;
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: drawCheck 0.4s ease-in-out forwards;
}
@keyframes drawCheck {
to { stroke-dashoffset: 0; }
}
JS 中仅需在验证通过时给 .check-icon 添加 .show 类（或直接 addClass），动画自动播放。
4. 防止重复触发与体验优化
用户快速输入或多次提交时，需避免动画堆积：
- 用
element.classList.replace('valid', 'valid')或先remove再add，确保动画重播 - 加节流：对
input事件使用setTimeout延迟校验（如 300ms） - 提交时统一清空旧状态，再逐个校验并触发对应动画
- 无障碍考虑：配合
aria-live="polite"向屏幕阅读器播报“验证通过”
不复杂但容易忽略细节：动画时间别太长（建议 0.3–0.6s），颜色选有足够对比度的绿色系，且确保在深色模式下依然清晰可见。
