JavaScript 如何防止不需要的表單提交？

防止使用 JavaScript 提交表單

使用 JavaScript 驗證表單時，在某些失敗情況下防止提交至關重要。在本文中，我們將探討停止表單提交並處理這些情況的方法。

從 JavaScript 函數傳回 False

停止表單提交的一種方法是傳回來自 JavaScript 函數的 false。點擊提交按鈕時，將呼叫驗證函數。如果滿足特定條件，則會呼叫名為 returnToPreviousPage() 的函數。

function returnToPreviousPage() {
    window.history.back();
}

但是，此函數目前會將使用者重定向到上一頁，而不是阻止提交。為了解決這個問題，我們可以利用其他技術。

preventDefault() 和 validateForm()

一個常見的方法是將 PreventDefault() 方法與validateForm() 函數。

<form onsubmit="event.preventDefault(); validateMyForm();">

如果驗證失敗，validateMyForm() 函數將傳回 false。這會阻止表單提交。

使用函數的回傳值

另一個選項是使用驗證函數的回傳值來阻止提交。

<form name="myForm" onsubmit="return validateMyForm();">

驗證函數可以實現如下：

function validateMyForm() {
  if (conditions not met) {
    alert("Validation failed");
    returnToPreviousPage();
    return false;
  }

  alert("Validation passed");
  return true;
}

此方法可讓您提供特定的錯誤訊息，並根據驗證結果處理頁面導覽。

相容性注意事項

值得注意的是，某些瀏覽器，例如Chrome 27.0.1453.116 m，可能需要將事件處理程序的參數的returnValue 字段設定為false 才能使此方法起作用。

以上是JavaScript 如何防止不需要的表單提交？的詳細內容。更多資訊請關注PHP中文網其他相關文章！