JavaScript 表单提交按钮单击检查必填字段是否为空

在表单提交之前，对必填字段进行检查非常重要。本文将介绍如何使用 JavaScript 在表单提交之前检查必填字段是否为空。

目标

• 获取表单中的必填字段
• 检查字段是否为空
• 在提交表单之前，阻止表单提交

获取表单中的必填字段

在 JavaScript 中，我们可以使用 document.querySelector() 或者 document.querySelectorAll() 方法来获取元素。我们需要获取表单中所有包含 required 属性的元素，因为这些元素是必填字段。

const form = document.querySelector('form');
const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]');

检查字段是否为空

为了检查字段是否为空，我们需要在表单提交之前监听 submit 事件。在事件处理函数中，我们将循环遍历所有必填字段，并检查它们的值是否为空。如果任何一个必填字段的值为空，则阻止表单提交。

form.addEventListener('submit', (event) => {
  let isFormValid = true;

  requiredFields.forEach((field) => {
    if (field.value.trim() === '') {
      isFormValid = false;
      field.classList.add('invalid');
    } else {
      field.classList.remove('invalid');
    }
  });

  if (!isFormValid) {
    event.preventDefault();
  }
});

阻止表单提交

如果任何一个必填字段的值为空，则需要阻止表单提交。我们可以使用 event.preventDefault() 方法来阻止表单提交。在 submit 事件处理函数中，如果有必填字段的值为空，则将 isFormValid 设置为 false，然后在检查完所有必填字段后，如果 isFormValid 为 false，则调用 event.preventDefault() 阻止表单提交。

最后，在必填字段为空时，我们可以为该字段添加一个 invalid 类，以便我们可以使用 CSS 来为这些字段添加样式。

完整代码

const form = document.querySelector('form');
const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]');

form.addEventListener('submit', (event) => {
  let isFormValid = true;

  requiredFields.forEach((field) => {
    if (field.value.trim() === '') {
      isFormValid = false;
      field.classList.add('invalid');
    } else {
      field.classList.remove('invalid');
    }
  });

  if (!isFormValid) {
    event.preventDefault();
  }
});

结论

在表单提交之前，检查必填字段是否为空非常重要。使用 JavaScript，我们可以轻松地获取表单中的必填字段，并在表单提交之前检查它们是否为空。如果有任何必填字段的值为空，我们可以使用 event.preventDefault() 方法阻止表单提交。