JavaScript 阻止表单提交 - HTML

有时候，我们想要在提交表单之前进行一些操作，比如验证输入，或者取消提交。在这种情况下，可以使用 JavaScript 阻止表单提交。本文将介绍如何使用 JavaScript 来阻止表单提交。

示例代码

下面是一个简单的 HTML 表单。注意，表单中包含一个 submit 按钮，以及一个 ID 为 myForm 的表单，用于 JavaScript 操作。

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="提交">
</form>

下面是使用 JavaScript 阻止表单提交的代码：

const form = document.querySelector('#myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交

  // 进行其他操作，比如验证输入

  // 最后，手动提交表单
  form.submit();
});

代码解析

首先，我们需要获取表单元素。在代码中，我们使用 document.querySelector() 方法来获取表单。该方法接受一个 CSS 选择器字符串作为参数，返回一个匹配该选择器的第一个元素。

然后，我们使用 addEventListener() 方法来添加一个 submit 事件监听器。当用户点击表单提交按钮时，该监听器会被触发。监听器接受一个 event 参数，该参数包含有关事件的信息。

在监听器内部，我们使用 event.preventDefault() 方法来阻止表单提交。该方法会阻止浏览器执行默认的表单提交操作。然后，我们可以进行其他操作，比如验证输入。

最后，如果我们想手动提交表单，可以使用 form.submit() 方法。

总结

使用 JavaScript 阻止表单提交是非常简单的。只需要获取表单元素，添加一个 submit 事件监听器，然后在监听器内部使用 event.preventDefault() 方法阻止表单提交即可。如果需要手动提交表单，可以使用 form.submit() 方法。