JavaScript表单验证完美代码

下面是详细讲解 JavaScript 表单验证完美代码的攻略。

什么是 JavaScript 表单验证？

JavaScript 表单验证是指利用 JavaScript 编写代码，对用户在表单中输入的数据进行校验。表单验证的目的在于防止用户误输入或恶意输入，确保表单提交的数据格式正确，并提升数据的安全性。

JavaScript 表单验证代码的编写步骤

在进行 JavaScript 表单验证的代码编写时，一般需要按照以下步骤进行：

1. 获取表单元素：使用 JavaScript 中的 DOM 操作方法根据表单元素的名称或 ID 获取表单元素对象。
2. 绑定事件监听器：使用 addEventListener() 或 on 进行事件的绑定，当用户提交表单时触发事件。
3. 编写验证函数：编写验证函数，对表单中的数据进行校验。在验证前，需要对表单数据进行初步的格式化转换。
4. 显示提示信息：验证函数返回 false 时，在页面中显示相应的提示信息。如果校验通过，则返回 true。
5. 提交表单或清空表单：如果校验通过，使用 JavaScript 中的 submit() 方法提交表单，否则清空表单并保留错误提示信息。

JavaScript 表单验证完美代码示例

以下是 JavaScript 表单验证完美代码的示例：

示例 1

const form = document.querySelector('#form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  if (validateForm()) {
    form.submit();
  }
});

function validateForm() {
  const email = document.querySelector('#email');
  const password = document.querySelector('#password');
  const confirmPassword = document.querySelector('#confirm-password');

  if (email.value.trim() === '') {
    email.nextElementSibling.textContent = '邮箱不能为空';
    return false;
  } else if (!isValidEmail(email.value)) {
    email.nextElementSibling.textContent = '请输入正确的邮箱格式';
    return false;
  }

  if (password.value.trim() === '') {
    password.nextElementSibling.textContent = '密码不能为空';
    return false;
  }

  if (confirmPassword.value.trim() === '') {
    confirmPassword.nextElementSibling.textContent = '确认密码不能为空';
    return false;
  } else if (confirmPassword.value !== password.value) {
    confirmPassword.nextElementSibling.textContent = '两次输入的密码不一致';
    return false;
  }

  return true;
}

function isValidEmail(email) {
  const emailRegex = /^\w+@[a-zA-z0-9]+\.[a-zA-Z]{2,4}$/;
  return emailRegex.test(email);
}

以上示例中，我们使用 DOM 操作方法获取表单元素对象，并使用 addEventListener() 方法绑定表单的 submit 事件。在 validateForm() 函数中，我们通过判断表单中各项输入的值是否符合特定条件进行校验。如果校验不通过，我们则使用 nextElementSibling 属性选中下一个兄弟元素节点，并在其文本内容中显示对应的错误提示消息。最后，如果表单数据校验成功，则可以使用 submit() 方法提交表单。

示例 2

const form = document.querySelector('#form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  if (validateForm()) {
    form.submit();
  }
});

function validateForm() {
  const username = document.querySelector('#username');
  const age = document.querySelector('#age');
  const email = document.querySelector('#email');
  const password = document.querySelector('#password');
  const confirmPassword = document.querySelector('#confirm-password');

  const errorMessage = document.querySelector('#error-message');

  let isValid = true;

  if (username.value.trim() === '') {
    errorMessage.textContent = '用户名不能为空';
    isValid = false;
  }

  if (isNaN(age.value) || parseInt(age.value) < 10 || parseInt(age.value) > 60) {
    errorMessage.textContent = '年龄必须在10~60岁之间';
    isValid = false;
  }

  if (email.value.trim() === '') {
    errorMessage.textContent = '邮箱不能为空';
    isValid = false;
  } else if (!isValidEmail(email.value)) {
    errorMessage.textContent = '请输入正确的邮箱格式';
    isValid = false;
  }

  if (password.value.trim() === '') {
    errorMessage.textContent = '密码不能为空';
    isValid = false;
  }

  if (confirmPassword.value.trim() === '') {
    errorMessage.textContent = '确认密码不能为空';
    isValid = false;
  } else if (confirmPassword.value !== password.value) {
    errorMessage.textContent = '两次输入的密码不一致';
    isValid = false;
  }

  return isValid;
}

function isValidEmail(email) {
  const emailRegex = /^\w+@[a-zA-z0-9]+\.[a-zA-Z]{2,4}$/;
  return emailRegex.test(email);
}

在以上示例中，我们在表单验证的基础上，增加了一个用于在页面中显示错误提示消息的元素，并添加了一个 name 为“age”的年龄输入框。在 validateForm() 函数中，我们对年龄输入框进行了验证，确保其在 10~60 岁之间。最后，我们只有在所有的表单项都通过校验才返回 true，否则显示相应的错误提示消息。

总结

JavaScript 表单验证是 Web 应用程序开发中非常重要的一环。如果没有正确的表单验证代码，在用户输入提交数据后，数据的安全性和准确性无法得到保障。编写 JavaScript 表单验证代码的过程中，我们需要遵循特定的验证流程，实现相应的功能模块。本文提供了两个 JavaScript 表单验证完美代码的示例，供读者参考。