数据结构
网络
关系数据库管理系统(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文档中定义一个表单标签，并赋予它一个onsubmit事件，其值为return false;，如上述语法所示。
步骤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;作为其值传递一样。
语法
以下语法用于将event.preventDefault值赋予onsubmit事件：
<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+ 次浏览
