网购付款时手一抖连点两下“提交订单”，结果收到两条确认短信；注册账号时网速慢，反复刷新页面又填了一遍信息，邮箱里立马多了两封验证邮件——这种尴尬，你中过招吗？
为啥表单会重复提交？
本质就一个原因：用户没等到响应，就又点了一次。可能是按钮没变灰、页面没跳转、加载动画太短，也可能是网络卡顿或服务器处理稍慢。浏览器可不管这些，它只认“点击”这个动作。
前端加把锁：按钮禁用最管用
最简单直接的办法，就是让用户点完第一次后，按钮立刻“失能”。比如登录表单：
<form id="loginForm">
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<button type="submit" id="submitBtn">登录</button>
</form>配合几行 JS：
document.getElementById('loginForm').addEventListener('submit', function(e) {
const btn = document.getElementById('submitBtn');
btn.disabled = true;
btn.textContent = '提交中...';
});用户点完，按钮立刻变灰+文字提示，再点也没反应——物理上就拦住了。
后端也不能偷懒：加个唯一令牌
光靠前端不保险，有人会禁用 JS，或者直接重放请求。所以服务端得有“防伪标”。常见做法是生成一次性 token（比如 UUID），塞进表单隐藏域：
<form action="/order" method="post">
<input type="hidden" name="_token" value="a1b2c3d4-5678-90ef-ghij-klmnopqrstuv">
<!-- 其他字段 -->
<button type="submit">立即下单</button>
</form>后端收到请求后，先校验这个 token 是否存在且未使用过，验证通过就消费掉它（比如从 Redis 中删除），下次再带同样 token 就直接拒掉。
顺手加个防抖：别让快速连点钻空子
有些用户习惯性双击按钮，哪怕按钮已禁用，也可能在极短时间内触发两次 submit 事件（尤其老旧浏览器）。加个毫秒级防抖更稳妥：
let isSubmitting = false;
document.getElementById('loginForm').addEventListener('submit', function(e) {
if (isSubmitting) {
e.preventDefault();
return;
}
isSubmitting = true;
// 提交后重置状态（成功/失败都重置）
setTimeout(() => { isSubmitting = false; }, 3000);
});这样，3 秒内无论点多少次，只认第一次。
真实场景小提醒
微信公众号里嵌的 H5 表单，经常因为右上角“刷新”按钮被误点，导致重复提交。建议这类页面加上 window.onbeforeunload 提示：“数据正在提交，请勿刷新”，虽然不能完全阻止，但能拦住大部分手滑党。
另外，所有涉及支付、报名、留言的关键操作，务必前后端双重防护——前端体验好，后端兜得住，这才是靠谱的组合拳。