数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何使用 JavaScript 阻止表单提交？
在本教程中，我们将了解使用 JavaScript 阻止表单提交的方法。通常，如果我们尝试使用某些事件执行某些操作，HTML 表单 默认情况下会自动提交。表单的自动提交会导致浏览器刷新并重新加载整个页面，这在某些情况下我们不希望发生。因此，为了在提交之前执行任何操作，我们需要更改表单的默认行为以防止其提交。
以下是我们可以用来阻止表单提交的方法：
使用“return false”值
使用 preventDefault() 方法
让我们逐一讨论它们以及代码示例。
使用“return false”值
我们可以通过为 onsubmit 事件赋予 "return false;" 值来阻止表单提交。为事件赋予此值使表单不返回任何内容，并防止其提交以及刷新浏览器。
语法
以下是使用 return false 值阻止表单提交的语法：
<form onsubmit="return false;"> //content of form tag </form>
算法
步骤 1 - 在第一步中，我们将在 HTML 文档中定义一个表单标签，并为其提供一个带有 return false; 值的 onsubmit 事件，如上述语法所示。
步骤 2 - 在下一步中，我们可以定义我们在表单提交之前要执行的操作。
步骤 3 - 在第三步中，我们将向用户证明表单未提交，方法是在不刷新浏览器的情况下更新某些文本。
示例
下面的示例将说明 onsubmit 事件和 return "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; 作为它的值传递。
语法
以下语法用于为 onsubmit 事件赋值 event.preventDefault：
<form onsubmit="event.preventDefault();"> //content of the form tag </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 阻止表单提交的方法，并通过代码示例了解了所有这些方法，这些示例展示了这些方法的使用，并证明了在表单提交之前执行了这些操作。
55K+ 次浏览
