应在表单 submit 事件中处理 loading，而非按钮 click；需 event.preventDefault() 阻止跳转，用 disabled 属性触发动画，保留原生验证，::after 伪元素实现旋转图标并绝对定位。
表单 submit 事件里加 loading 才真正可靠
直接监听按钮 click 会漏掉回车提交、无障碍操作、JS 调用 form.submit() 等场景，导致 loading 不触发。必须把逻辑绑在 submit 事件上，且用 event.preventDefault() 阻止默认跳转——这是唯一覆盖所有提交路径的方式。
- HTML 中不要写
onsubmit="return false"或空onsubmit，留白或只调用函数 - JS 中用
form.addEventListener('submit', handler)，不是button.addEventListener('click', ...) - 务必在 handler 开头执行
event.preventDefault()，否则页面立即跳转，DOM 修改根本来不及渲染
禁用按钮 + CSS 动画比 JS 插入 HTML 更稳
别用 button.innerHTML = '...' 替换内容——它破坏语义、影响屏幕阅读器，且在表单验证失败时难以恢复原始文本。正确做法是：保留按钮文字，仅通过 disabled 属性触发 CSS 动画。
- 给提交按钮加 class，比如
class="btn-submit" - CSS 中写：
.btn-submit:disabled::after生成旋转圆圈，用border-top-color+border-radius: 50%拼出单色圆环 - JS 中只做两件事：
button.disabled = true和form.requestSubmit()（后者能触发原生验证）
HTML5 验证和 loading 必须共存，不能牺牲其一
如果先禁用按钮再手动 form.submit()，浏览器会跳过 required、type="email" 等原生校验。正确顺序是：让表单先走完验证流程，只在验证通过后才启动 loading。
- 不要在
click里调用form.submit()—— 这绕过验证 - 在
submit事件 handler 中，先检查form.checkValidity()，为false就直接return - 验证通过后，再设
button.disabled = true，然后发 AJAX 或继续提交 - 若用同步提交（不推荐），确保
disabled设置发生在event.preventDefault()之后、但仍在同一帧内
动画元素必须脱离文档流，否则影响布局
用 ::after 伪元素实现的旋转圆圈，必须用 position: absolute 定位，否则会撑开按钮高度或导致文字偏移。尤其当按钮有 padding 或 line-height 时，相对定位容易错位。
- 按钮本身设
position: relative -
::after设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 宽度/高度统一用
em或固定像素（如1.2em），避免随字体缩放失真 - 动画用
animation: spin 1s linear infinite，别用transition—— 后者无法持续旋转
实际中最容易被忽略的是：表单验证通过前，按钮不能提前禁用；而验证通过后，又必须在极短时间内完成禁用+动画启用，否则用户可能看到“空白按钮”或“文字消失但没动画”的卡顿状态。这个时间窗口依赖浏览器渲染帧，所以纯 CSS 方案（靠 :disabled 自动触发）比 JS 控制类名更鲁棒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
