JS 在输入时停止表单提交 - JavaScript

在开发 Web 应用程序时，表单是不可或缺的一部分。用户可以通过表单与应用程序交互，并提供必要的信息。在大多数情况下，当用户填写表单并按下提交按钮时，该表单将被提交到服务器以进行处理。但是，在某些情况下，您可能希望在用户输入时验证其输入，并仅在输入有效时允许提交表单。本文将向您展示如何使用 JavaScript 在输入时停止表单提交。

HTML 表单

首先，我们需要一个 HTML 表单以进行演示。以下是一个简单的表单，带有一个文本框和一个提交按钮：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <input type="submit" value="Submit">
</form>

在默认情况下，此表单将在用户点击提交按钮时对其进行提交。

JavaScript 事件

要在用户输入时停止表单提交，我们需要使用 JavaScript 监听表单的输入事件。以下是 JavaScript 代码片段，将在文本框中的每个键盘输入时触发：

const nameInput = document.getElementById('name');

nameInput.addEventListener('input', () => {
  // 在这里放置代码来停止表单提交（如果输入无效）
});

在这段代码中，我们使用 addEventListener() 方法将输入事件添加到名为 nameInput 的元素（即文本框）。当用户在该文本框中输入任何内容时，将触发此事件，并执行我们在回调函数中编写的代码。

停止表单提交

现在我们已经有了包含表单输入事件的 JavaScript 代码，我们可以调用 preventDefault() 方法来停止表单的提交。以下是完整的 JavaScript 代码：

const nameInput = document.getElementById('name');
const form = document.querySelector('form');

nameInput.addEventListener('input', (event) => {
  if (event.target.validity.valid) {
    form.removeAttribute('data-invalid');
  } else {
    form.setAttribute('data-invalid', true);
  }
});

form.addEventListener('submit', (event) => {
  if (!form.hasAttribute('data-invalid')) {
    // 停止表单提交并执行其他代码
    event.preventDefault();
  }
});

在这段代码中，我们使用 getAttribute() 和 setAttribute() 方法在表单元素上设置自定义属性 data-invalid。这允许我们在使用 CSS 样式表时轻松地为输入无效的表单添加样式。我们还在 submit 事件上使用 hasAttribute() 方法来检查表单是否有效，如果无效，则调用 preventDefault() 停止表单提交。

结论

在本文中，我们学习了如何使用 JavaScript 在输入时停止表单提交。我们使用 addEventListener() 方法将输入事件添加到文本框，并在事件处理程序中调用 preventDefault() 方法来阻止表单提交。这可以帮助我们在用户输入有效时，停止无效数据被提交到服务器。