好的，我帮你整理一份 前端防止表单重复提交的多种解决方案（2025 最新版），包含 JS 层面、Vue/React 框架实现，以及常见场景实践。

🚀 前端防止表单重复提交解决方案

表单重复提交会导致：

  • 重复订单
  • 重复支付
  • 数据库冗余记录

防止重复提交的方案主要分为 前端控制 和 前后端结合控制。

1️⃣ 禁用按钮法（最常用）

提交表单时，立即禁用提交按钮，避免用户连续点击。

<form id="myForm">
  <input type="text" name="name" required />
  <button id="submitBtn" type="submit">提交</button>
</form>

<script>
const form = document.getElementById("myForm");
const btn = document.getElementById("submitBtn");

form.addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止默认提交
  btn.disabled = true; // 禁用按钮
  // 模拟异步请求
  setTimeout(() => {
    alert("表单提交成功");
    btn.disabled = false; // 可选：请求完成后恢复按钮
  }, 2000);
});
</script>

✅ 优点：简单直观
⚠️ 缺点：用户快速刷新仍可能重复提交

2️⃣ 前端防抖（Debounce）法

利用防抖函数，限制短时间内重复触发提交事件。

function debounce(fn, delay = 1000) {
  let timer = null;
  return function(...args) {
    if(timer) return;
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  }
}

const submitForm = () => {
  alert("表单已提交");
};

document.getElementById("submitBtn").addEventListener(
  "click",
  debounce(submitForm, 1000)
);

✅ 适合多次点击按钮场景
⚠️ 不适合长时间请求控制

3️⃣ 前端节流（Throttle）法

保证一定时间内只触发一次提交，适合连续点击场景。

function throttle(fn, limit = 2000) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if(now - lastCall >= limit) {
      lastCall = now;
      fn.apply(this, args);
    }
  }
}

document.getElementById("submitBtn").addEventListener(
  "click",
  throttle(() => alert("表单提交成功"), 2000)
);

4️⃣ Token/Flag 控制法（最安全）

① 前端生成唯一提交标识（UUID/时间戳）

let isSubmitting = false;

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  if(isSubmitting) return; // 已提交，直接返回
  isSubmitting = true;

  // 模拟异步提交
  await new Promise(resolve => setTimeout(resolve, 2000));
  alert("表单提交成功");
  isSubmitting = false; // 请求完成后重置
});

✅ 优点：可防止快速重复点击，安全可靠
⚠️ 与后端结合可防止刷新重复提交

② 后端生成一次性 token（推荐企业级方案）

  • 前端从接口获取 csrfToken 或 submitToken
  • 提交表单时带上 token
  • 后端验证 token 是否已使用

示例流程：

前端请求 token --> 用户填写表单 --> 提交表单 + token --> 后端验证 token --> token 作废

✅ 优点：安全性高，可防止刷新、F5 和重复提交
⚠️ 缺点：需后端配合

5️⃣ 使用 Vue3 或 React 框架实现防重复提交

Vue3 + Flag 示例

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="name" required />
    <button :disabled="isSubmitting">提交</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
const isSubmitting = ref(false)

const handleSubmit = async () => {
  if(isSubmitting.value) return
  isSubmitting.value = true
  await new Promise(resolve => setTimeout(resolve, 2000)) // 模拟请求
  alert(`提交成功: ${name.value}`)
  isSubmitting.value = false
}
</script>

React + Flag 示例

import { useState } from 'react';

function MyForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [name, setName] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if(isSubmitting) return;
    setIsSubmitting(true);
    await new Promise(resolve => setTimeout(resolve, 2000));
    alert(`提交成功: ${name}`);
    setIsSubmitting(false);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} required />
      <button type="submit" disabled={isSubmitting}>提交</button>
    </form>
  );
}

6️⃣ 总结与推荐方案

方法特点场景
禁用按钮简单直观小型项目、表单点击控制
防抖限制短时间重复触发连续点击按钮
节流限制一定时间提交高频点击按钮
前端 Flag/Token高安全，控制提交状态企业级前端防重复提交
后端 Token最安全，防刷新/重复提交电商、支付系统必用

✅ 推荐组合方案：

  • 前端 Flag + 后端一次性 Token → 最安全
  • 简单场景：禁用按钮或防抖即可