最轻量防重复提交方案是提交瞬间禁用按钮并显示loading文字，用form.submit事件拦截、finally恢复状态，配合服务端幂等控制。
点击后禁用按钮并显示 Loading 文字
直接修改按钮的 disabled 属性和 innerText 是最轻量、兼容性最好的方式，不需要额外依赖。关键在于「提交瞬间就锁住按钮」，避免重复点击导致多次请求。
常见错误是只改文字不设 disabled，或在异步回调里才设——这时候用户早已点了好几下。
- 用
form.addEventListener('submit', ...)拦截原生提交，比监听按钮 click 更可靠（比如回车触发提交时也能捕获） - 按钮初始文字建议用
data-default-text存起来，方便恢复；Loading 文字统一用data-loading-text - 务必在
fetch或axios的.finally()里恢复按钮，而不是只在.then()和.catch()分别写恢复逻辑，否则异常未被捕获时按钮会永远卡住
const form = document.querySelector('#myForm');
const btn = form.querySelector('button[type="submit"]');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const defaultText = btn.dataset.defaultText || btn.innerText;
const loadingText = btn.dataset.loadingText || '提交中...';
btn.disabled = true;
btn.innerText = loadingText;
try {
await fetch(form.action, {
method: 'POST',
body: new FormData(form)
});
// 处理成功
} catch (err) {
// 处理错误
} finally {
btn.disabled = false;
btn.innerText = defaultText;
}
});
用 Bootstrap 5 的 spinner 组件替换文字
Bootstrap 5 自带 .spinner-border 和 .spinner-grow，但不能直接塞进按钮里再用 CSS 控制显隐——因为默认 spinner 是 inline 元素，按钮高度会塌缩或错位。
正确做法是：把 spinner 和文字都写进按钮，用 visibility: hidden + position: absolute 隐藏文字，让 spinner 占满按钮空间，同时保持按钮尺寸稳定。
- 不要用
display: none隐藏文字，否则按钮宽度会随内容收缩，造成布局抖动 - 必须给按钮加
position: relative，否则position: absolute的 spinner 会脱离容器定位 - Spinner 尺寸建议用
spinner-border-sm，太大在小按钮里会溢出
<button type="submit" class="btn btn-primary position-relative">
<span class="d-flex align-items-center">
<span class="submit-text">提交</span>
<span class="spinner-border spinner-border-sm d-none ms-2"></span>
</span>
</button>
JS 中切换：btn.querySelector('.submit-text').classList.add('visually-hidden');，btn.querySelector('.spinner-border').classList.remove('d-none');
防止表单重复提交的底层逻辑不能只靠 UI
按钮变 Loading 只是用户体验层防护，真正的防重提交必须在服务端加幂等性控制（比如用 idempotency-key 请求头或数据库唯一索引）。前端任何禁用、跳转、弹窗都可能被绕过。
- 用户禁用 JS 后，按钮完全无效——所以服务端必须能拒绝重复的相同业务请求
- 如果用了
history.pushState或location.replace跳转，记得在跳转前恢复按钮状态，否则页面卸载时按钮仍为 disabled，返回后无法再点 - 移动端 Safari 对
disabled按钮的样式支持不稳定，建议额外加opacity: 0.6和pointer-events: none做双重保险
Axios 请求时绑定按钮 Loading 状态更简洁
如果你项目已用 axios，可以用请求拦截器 + 取消令牌（AbortController）配合按钮状态管理，但注意：拦截器本身不感知具体哪个按钮被点，得靠上下文传参。
更实用的做法是封装一个 submitWithLoading 函数，接收表单、按钮、请求配置三要素，内部统一处理状态和请求。
- 不要在拦截器里直接操作 DOM，违背关注点分离，也难测试
- 避免给每个按钮单独写
axios.post(...).then(...)，容易漏掉finally恢复逻辑 - 如果按钮有多个提交路径（如「保存草稿」和「正式提交」），用
data-action-type区分，而不是硬编码 URL
真正容易被忽略的是：当用户快速连点两次，第一次请求还没发出去，第二次又触发了 —— 这时候光靠按钮禁用不够，得在 submit 事件里加节流（setTimeout + 标志位），或者用 AbortController 主动取消上一次未完成请求。
