防止表单提交 JavaScript

1. 使用 script 标签内的函数来停止 JavaScript 中表单的执行
2. 在 JavaScript 中使用 Vanilla JavaScript 停止表单的执行
3. 在 JavaScript 中使用 jQuery 库停止表单的执行
4. 在 JavaScript 中使用 Dojo Toolkit 停止表单的执行

所有网络浏览器都支持 JavaScript，用于制作动态网页。在本教程中，我们将停止使用 JavaScript 执行表单。

使用 script 标签内的函数来停止 JavaScript 中表单的执行

script 标签用于包含客户端脚本。我们在 script 标签中创建了一个 JavaScript 函数来防止提交表单。

参考下面的代码。

<form onsubmit="submitForm(event)">
  <input type="text">
  <button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
  function submitForm(event){
    event.preventDefault();
    window.history.back();
  }
</script>

preventDefault() 函数不会让事件的默认操作发生。window.history.back() 将我们带到历史记录中的上一个 URL。讨论的所有方法都将包括这两个功能。

在 JavaScript 中使用 Vanilla JavaScript 停止表单的执行

Vanilla JavaScript 纯粹在 JavaScript 上工作，不使用任何额外的库。

事件侦听器可用于防止表单提交。它被添加到提交按钮，该按钮将执行该功能并在单击时阻止表单提交。

例如，

element.addEventListener('submit', function(event) {
  event.preventDefault();
  window.history.back();
}, true);

在 JavaScript 中使用 jQuery 库停止表单的执行

jQuery 是一个快速而强大的库，可以简化 JavaScript 的使用。它是最流行的 JavaScript 库之一。

我们将看到我们如何才能阻止表单的提交。

参考下面的代码。

$('#form').submit(function(event) {
  event.preventDefault();
  window.history.back();
});

$('#form').submit() 函数用于在 jQuery 中提交表单。

在 JavaScript 中使用 Dojo Toolkit 停止表单的执行

它是一个 JavaScript 库，有助于简化 JavaScript 在基于 Web 的应用程序中的跨平台使用。它使用 dojo.connect() 函数来处理事件。在我们的例子中，这用于表单提交，我们将使用 preventDefault() 和 window.history.back() 函数来防止这种情况。

例如，

dojo.connect(form, 'submit', function(event) {
  event.preventDefault();
  window.history.back();
});