如何使用 JavaScript 停止表单提交?
在本教程中，我们将了解使用 JavaScript 停止表单提交的方法。通常，如果我们尝试使用某些事件执行某些操作，则 HTML 表单默认会自动提交。表单的自动提交会导致浏览器再次刷新并重新加载整个页面，而在某些情况下我们并不想执行此操作。因此，要在提交之前执行任何操作，我们需要更改表单的默认行为以阻止其提交。
以下是我们可以用来停止表单提交的方法 -
使用"return false"值
使用preventDefault()方法
让我们通过代码示例逐一讨论它们。
使用"return false"值
我们可以通过为onsubmit事件提供"return false;"值来阻止表单提交。将此值赋予事件会使表单不返回任何内容，并阻止其提交以及刷新浏览器。
语法
以下语法用于使用 return false 值停止表单的提交 -
<form onsubmit="return false;"> //表单标签的内容 </form>
算法
步骤 1 - 在第一步中，我们将在 HTML 文档中定义一个表单标签，并为其提供一个 onsubmit 事件和一个 return false;如上述语法所示。
步骤 2 - 在下一步中，我们可以定义在提交表单之前要执行的操作。
步骤 3 - 在第三步中，我们将通过更新某些文本而不刷新浏览器来向用户证明表单未提交。
示例
以下示例将说明 onsubmit 事件的使用以及返回"false"值 -
<!DOCTYPE html>
<html>
<body>
<h3>Stop form submission using JavaScript?</h3>
<form onsubmit="return false;">
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</button>
</form>
<script>
function display() {
let result = document.getElementById("result");
result.innerHTML = "<b>The button is clicked and form is not submitted yet.</b>"
}
</script>
</body>
</html>
在此示例中，我们通过按下按钮来更改按钮上方的文本，以向用户显示表单未提交，并且在表单提交之前执行某些活动时浏览器未刷新。
使用preventDefault()方法
在JavaScript中，我们提供了一个内置的preventDefault()方法，用于停止表单的提交，并防止浏览器在执行某些任务时自我刷新。
我们可以通过两种方式使用 preventDefault()方法来停止表单提交-
通过将其用作onsubmit 事件的值。
通过在事件的回调函数中使用它。
让我们理解它们两者细节。
通过将其用作 onsubmit 事件的值
我们可以将 event.preventDefault() 方法作为值传递给 onsubmit 事件，就像我们在之前的方法中传递 return false; 作为它的值一样。
语法
以下语法用于将 event.preventDefault 值分配给 onsubmit 事件 -
<form onsubmit="event.preventDefault();"> //表单标签的内容 </form>
让我们借助程序示例来看一下实际的实现。
注意 − 此方法与上述方法的算法几乎相同。您只需将上例中的 onsubmit 事件的值从"return false"更改为 event.preventDefault();即可。
示例
以下代码是我们上面讨论的方法的实际实现，即 event.preventDefault() 方法 −
<!DOCTYPE html>
<html>
<body>
<h3>Stop form submission using JavaScript? </h3>
<form onsubmit="event.preventDefault();">
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</button>
</form>
<script>
function display() {
let result = document.getElementById("result");
result.innerHTML = "<b>The form is secured from submission using the preventDefault() method.</b>"
}
</script>
</body>
</html>
在上面的例子中，我们将 event.preventDefault() 作为值传递给 onsubmit 事件，该事件负责停止表单提交以及浏览器刷新。
通过在回调函数中使用 event.preventDefault()
在此方法中，我们不需要使用 onsubmit 事件，而是可以在我们想要在提交表单之前激活的事件的回调函数中使用 preventDefault() 方法。
语法
以下语法显示了如何在回调函数中使用 prventDefault() −
function callback(event){
event.preventDefault()
}
算法
步骤 1 − 第一步涉及定义 HTML 文档中的表单标签和其他必需内容。
步骤 2 − 在此步骤中，我们将定义事件的回调函数，并在其中使用 event.preventDefault，如上述语法所示。
步骤 3 − 在第三步中，我们只需将函数分配给事件，该事件在触发时调用该函数。
让我们借助程序示例来理解它。
示例
以下代码将解释如何在事件的回调函数中使用 preventDefault() −
<!DOCTYPE html>
<html>
<body>
<h3>Stop form submission using JavaScript?</h3>
<form>
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</button>
</form>
<script>
function display() {
event.preventDefault();
let result = document.getElementById("result");
result.innerHTML = "<b>The form is secured from submission using the preventDefault() method inside callback function.</b>"
}
</script>
</body>
</html>
在此示例中，我们定义了 display() 函数，并在其中使用了 event.preventDefault()，这可防止浏览器刷新和表单提交。定义函数后，我们将其分配给与按钮标记关联的 onclick 事件，该事件通过按下按钮触发事件并同时调用函数。
在本教程中，我们学习了使用 JavaScript 停止表单提交的方法，并使用代码示例了解了所有这些方法及其实际实现，这些代码示例展示了这些方法的使用，并证明操作是在提交表单之前执行的。
