在前端開發裏，“提交表單時執行某個 <span style="color:red">func</span> 方法”，本質就是把表單的 <span style="color:red">submit</span> 事件攔截下來，然後在你自定義邏輯跑完後，再決定：是 <span style="color:red">繼續提交</span> 還是 <span style="color:red">阻止提交</span>。這一步做好了，表單驗證、二次確認、防重複提交、異步請求都能一條鏈路打通。🙂

一、核心原理（抓住這三點就不繞路）

1. 瀏覽器點擊按鈕或回車會觸發表單的 <span style="color:red">submit</span> 事件
2. 默認行為是“直接提交併刷新/跳轉”
3. 你要執行 <span style="color:red">func</span>，就必須：先 <span style="color:red">preventDefault</span> 攔住默認提交，再按結果手動提交或走 AJAX

二、推薦方案 1：原生 JS 綁定 submit（通用、最穩）

示例代碼

<form id="loginForm" action="/api/login" method="post">
  <input name="username" />
  <input name="password" type="password" />
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('loginForm');

  function func(formEl) {
    // 這裏寫你的業務邏輯：校驗、埋點、風控、加密、節流等
    const username = formEl.username.value.trim();
    const password = formEl.password.value.trim();
    if (!username || !password) return false;
    return true;
  }

  form.addEventListener('submit', (e) => {
    e.preventDefault();                 // 1) 阻止默認提交（關鍵）
    const ok = func(form);              // 2) 執行你的 func
    if (ok) form.submit();              // 3) 通過則手動提交
  });
</script>

逐段解釋

• <button type="submit">：明確這是觸發 <span style="color:red">submit</span> 的按鈕，否則默認行為可能不一致。
• addEventListener('submit', ...)：綁定表單提交事件，比綁定按鈕點擊更可靠（回車提交也能覆蓋）。
• e.preventDefault()：核心動作，先“剎車”，不讓瀏覽器直接提交。
• func(form)：你要執行的 <span style="color:red">func</span>，建議返回布爾值，形成可控的“放行/攔截”策略。
• form.submit()：手動提交，注意它不會再觸發 submit 事件（避免死循環），適合在校驗後放行。

三、推薦方案 2：在 HTML 上直接寫 onsubmit（簡單但可維護性一般）

示例代碼

<form action="/api/save" method="post" onsubmit="return func(event, this)">
  <input name="title" />
  <button type="submit">提交</button>
</form>

<script>
  function func(e, formEl) {
    e.preventDefault();                 // 阻止默認提交
    const title = formEl.title.value.trim();
    if (!title) return false;           // 校驗失敗：不提交
    formEl.submit();                    // 校驗成功：手動提交
    return false;                       // 始終返回 false，避免重複默認提交
  }
</script>

逐段解釋

• onsubmit="return func(event, this)"：把 <span style="color:red">submit</span> 事件直接交給 func。
• return false：避免瀏覽器繼續執行默認提交（雙保險）。
• 這種方式適合小頁面/活動頁，企業工程化項目建議用事件綁定方式更清晰。

四、推薦方案 3：提交時執行 func，然後改用 AJAX（不刷新頁面）✅

示例代碼

<form id="payForm">
  <input name="amount" />
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('payForm');
  let submitting = false;

  async function funcAndSubmitAjax(formEl) {
    const amount = formEl.amount.value.trim();
    if (!amount) throw new Error("amount empty");
    const data = new FormData(formEl);

    const resp = await fetch('/api/pay', {
      method: 'POST',
      body: data
    });

    if (!resp.ok) throw new Error("request failed");
    return await resp.json();
  }

  form.addEventListener('submit', async (e) => {
    e.preventDefault();                       // 阻止默認刷新
    if (submitting) return;                   // 防重複提交（關鍵）
    submitting = true;

    try {
      const result = await funcAndSubmitAjax(form); // 執行 func + 發請求
      console.log(result);
    } catch (err) {
      console.error(err);
    } finally {
      submitting = false;
    }
  });
</script>

逐段解釋

• fetch(...)：走異步提交，頁面不跳轉，適合後台管理、支付、配置保存等場景。
• FormData(formEl)：直接把表單字段打包成請求體，減少手工拼 JSON 的出錯率。
• submitting：最務實的 <span style="color:red">防重複提交</span> 控制，能顯著降低重複訂單/重複寫入風險。
• try/catch/finally：保證異常時也能恢復按鈕狀態與提交流程。

五、對比表：你該選哪種

六、你可以直接複用的“標準提交鏈路”思路

把提交過程當成一個小型工作流來設計，邏輯會非常清晰：

flowchart TD
A[用户點擊提交/回車] --> B[觸發表單submit事件]
B --> C[preventDefault阻止默認提交]
C --> D[執行func: 校驗/風控/埋點/節流]
D --> E{是否通過?}
E -- 否 --> F[提示錯誤並結束]
E -- 是 --> G[手動submit或AJAX提交]
G --> H[成功/失敗回調]

如果你説一下你當前用的是：<span style="color:red">原生</span> / <span style="color:red">Vue</span> / <span style="color:red">React</span> / <span style="color:red">jQuery</span> 哪一種，我可以直接按你的技術棧給你一份“可複製就能用”的版本（含按鈕 loading、防抖、校驗失敗聚焦、後端錯誤碼處理）。