必须监听 form.onsubmit 而非 button.onclick，因其能覆盖点击按钮、回车提交、js调用form.submit()三种触发方式，确保原生校验（如required）生效且loading逻辑不被绕过。
直接在 form.onsubmit 里阻止默认行为、禁用按钮、切换文案，再用 fetch 或 XMLHttpRequest 提交——这是最稳、兼容性最好、且不绕过 required 等原生校验的方式。别在 button.onclick 里处理，否则回车提交、无障碍操作或 JS 主动调用 form.submit() 都会跳过 loading 和禁用逻辑。
为什么必须监听 form.onsubmit 而不是 button.onclick
表单提交有至少三种触发方式：点击 submit 按钮、按回车键、JS 调用 form.submit()。只有 form.onsubmit 能覆盖全部路径。监听 button.onclick 会漏掉后两者，导致用户填了空字段却没触发校验，或点了两次才发请求。
-
form.onsubmit是浏览器执行校验后的最后一个钩子，校验通过才会进入，天然安全 - 若在
onclick里调用event.preventDefault()+form.submit()，等于手动绕过校验，required、type="email"全失效 - 移动端键盘“发送”键、屏幕阅读器的回车提交，也都只触发
submit事件，不触发click
如何正确禁用按钮并更新文案（input vs button）
按钮类型不同，DOM 属性操作方式不同：用 input[type="submit"] 就改 value；用 button[type="submit"] 就改 textContent。同时必须设 disabled = true，光改文字没用。
-
input[type="submit"]：保存原始btn.value，设btn.value = '提交中...'+btn.disabled = true -
button[type="submit"]：保存原始btn.textContent，设btn.textContent = '提交中...'+btn.disabled = true - 恢复时一定用存下来的原始值，别硬编码写死，否则多语言或动态文案会出错
- 别用
pointer-events: none或opacity: 0.5代替disabled——前者不阻断键盘回车，也不影响表单校验逻辑
纯 CSS loading 动画怎么加才不翻车
用伪元素 + content 动画做省略号，或用 border + transform: rotate() 做旋转圆圈，比 SVG 或第三方图标更轻、更可控、无加载失败风险。
- 动画类名别叫
spin，容易全局冲突；推荐用带作用域的名，比如.btn-loading::after - 旋转动画要显式设
transform-origin: center，尤其 iOS Safari 默认值不一致 - 所有 loading 样式必须绑定在
data-loading="true"这类自定义属性上，而不是靠 JS 切换 class——避免 class 漏清理或命名冲突 - 别对整个按钮设
opacity: 0.6，会降低可访问性对比度；可用filter: grayscale(30%)替代
超时和取消机制为什么不能省
网络卡住、接口假死、用户想改数据——单纯禁用按钮会让页面“冻结”。得给明确出口，但又不能破坏表单状态。
- 设个 15s 超时定时器，到期自动恢复按钮并提示“请求超时”，避免用户以为页面崩了
- 提供“取消”按钮（非必需，但建议），点击后清除 pending 请求、恢复按钮、不清空已填字段
- 如果用了
fetch，记得用AbortController中止请求；用XMLHttpRequest就调xhr.abort() - modal 里弹出的表单，还要同步给 modal 根节点加
pointer-events: none，防止点击 backdrop 穿透到背后按钮
最容易被忽略的是错误路径下的状态还原：请求失败后，按钮没恢复可点击态、错误提示没清空、或者 loading 动画残留。这些细节不写进 catch 分支，上线后就是用户狂点没反应，以为功能坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
