必填项提交失败时震动需监听invalid事件并结合CSS动画实现：为required字段绑定invalid事件，触发时切换shake类强制重播@keyframes震动动画，注意避免hidden输入框、select空选项未禁用等校验失效问题。
要在表单提交失败时让必填项输入框震动，核心是把 HTML5 的 required 原生校验机制、CSS 动画和 JavaScript 事件联动起来。浏览器不会在验证失败时触发 submit 事件，所以不能等表单提交后再处理——得监听校验失败本身。
确保 required 正确生效
只对 （非 hidden/button/submit/reset）、、 有效。常见错误包括：
- 给
加required→ 完全无效，还可能干扰逻辑 -
的默认选项写成→ 空值仍被判定为未填写 - 正确写法：用
disabled+selected的空选项，例如：
用 :invalid 伪类配合 CSS 动画
浏览器在字段不满足 required 或其他约束时，会自动给元素添加 :invalid 状态。你可以直接用它触发动画，但注意：不能直接在 :invalid 里写 animation，因为该伪类不触发重绘，动画不会播放。
推荐做法是结合 JavaScript，在 invalid 事件中动态加类：
- 监听每个必填字段的
invalid事件（注意不是blur或input） - 事件触发时，先移除已有的
shake类，再加回去，强制重播动画 - 关键代码片段：
input.addEventListener('invalid', e => {<br> e.preventDefault();<br> input.classList.remove('shake');<br> void input.offsetWidth;<br> input.classList.add('shake');<br>});
定义可控的震动动画
CSS 震动动画必须用 @keyframes + animation，不能依赖 transition。一个实用版本如下：
@keyframes shake {<br> 0% { transform: translateX(0); }<br> 25% { transform: translateX(-6px); }<br> 50% { transform: translateX(6px); }<br> 75% { transform: translateX(-4px); }<br> 100% { transform: translateX(0); }<br>}<br>.shake {<br> animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) forwards;<br>}
- 幅度控制在 ±4px ~ ±6px，太大会失真，太小难察觉
- 持续时间 0.4s 左右，带点“顿挫感”，避免缓动削弱警示性
- 必须加
animation-fill-mode: forwards，否则动画结束立刻弹回原位
补充：避免常见干扰
有些操作会绕过原生校验，导致震动失效：
- 不要监听按钮的
click事件并调用form.submit()→ 这会跳过所有required校验 - 务必监听
form的submit事件来拦截成功提交，或监听字段的invalid事件来捕获失败 - 如果用了 JS 清空了
value（比如重置表单），记得同步清除shake类，否则残留动画影响体验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
