应使用 input 事件而非 change 事件触发表单动画，因其在每次输入、粘贴、删除时即时触发；配合防抖、classList 切换语义化类名、CSS 自定义属性及 Map 缓存 DOM 引用，确保动画流畅稳定。
动画触发依赖表单值变化时，用 input 事件比 change 更及时
用户在输入过程中就该响应动画（比如实时验证提示、进度条增长），change 事件只在失焦或回车后触发，会明显延迟。必须监听 input 事件——它在每次输入、粘贴、删除时都触发。
-
input事件兼容所有现代浏览器（包括 IE9+），但不触发于type="checkbox"或type="radio"的点击；这类控件改用change - 对
contenteditable元素也有效，但需注意 Safari 中可能漏触发，建议加setTimeout防抖兜底 - 避免直接在事件回调里调用
requestAnimationFrame，先用debounce控制频率，否则快速输入易卡顿
用 classList.toggle() 控制 CSS 动画开关比内联 style.animation 更可靠
CSS 动画靠类名切换最稳定：既可复用预设的 @keyframes，又能利用浏览器对 class 切换的优化机制。硬编码 style.animation 容易因字符串拼接出错、重置不彻底或覆盖其他动画。
- 动画类名应带明确语义，例如
is-validating、has-error，而非animate-1这类无意义命名 - 若需参数化动画（如不同颜色提示），用 CSS 自定义属性（
--error-color）配合element.style.setProperty()，别拼style字符串 - 动画结束后记得清理临时类名，尤其涉及循环触发的场景，否则
animationend可能漏监听导致状态残留
.input-field.is-validating {
animation: pulse 0.6s ease-in-out;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
联动多个表单字段时，避免用 name 属性做唯一标识来查 DOM
document.querySelector('[name="email"]') 看似方便，但 name 值可能重复（如多组 radio）、含特殊字符（空格、点号）、或被后端模板动态生成而不可控。更安全的方式是用 id + for 关联，或统一用 data- 属性标记关系。
- 给每个需要联动的字段加
data-trigger和data-target，例如：<input id="age" data-trigger="age"><div data-target="age"> <li>用 <code>Map缓存 target 元素引用，避免每次querySelector查 DOM，尤其在高频input事件中 - radio/checkbox 组合联动时，监听父容器的
change，再用e.target判断具体哪个被选中，别遍历所有同名 input -
validity.valid是最终结果，但细分原因在validity.valueMissing、validity.typeMismatch等属性里，可用于差异化动画（如必填项抖动、邮箱格式错缩放） - 提交时若发现无效，用
element.reportValidity()触发原生提示，但它不支持自定义动画；想统一动效就得禁用原生行为（e.preventDefault()），全由 JS 控制 - 注意
setCustomValidity('')清空自定义错误后，需再次调用checkValidity()才能更新validity.valid状态
form.checkValidity() 不触发 UI 动画，得手动补全验证反馈逻辑
调用 form.checkValidity() 只返回布尔值，不会自动高亮错误字段、显示提示文案或播放错误动画。必须自己遍历 form.elements，检查每个元素的 validity 对象，并显式添加对应类名或触发动画。
立即学习“前端免费学习笔记（深入）”；
console.log 打点，确认 input → 验证 → 类名切换 → 动画触发的链条是否连贯。
