原生JS 实现表单验证让前端更好用！

2024-01-15 09:14:27

在前端开发中，表单验证是一个非常重要的功能，它可以帮助开发者确保用户在提交表单时输入的是合法的数据，防止提交无效的数据。而原生 JS 实现表单验证的方式有很多，本文将介绍一种简单易懂的方法，帮助大家快速入门。

实现步骤

创建表单

首先，我们需要创建一个表单，其中包含需要验证的输入字段。例如：

<form id="form">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="email" name="email" placeholder="请输入邮箱">
  <input type="password" name="password" placeholder="请输入密码">
  <input type="submit" value="提交">
</form>

获取表单元素

接下来，我们需要获取表单中的所有需要验证的输入字段，可以使用 document.querySelectorAll() 方法来实现：

const form = document.getElementById('form');
const inputs = form.querySelectorAll('input');

编写验证函数

接下来，我们需要编写一个验证函数，用于验证输入字段中的数据是否合法。验证函数可以根据需要验证的字段类型来编写，例如：

function validateUsername(username) {
  const reg = /^[a-zA-Z0-9_]{3,16}$/;
  return reg.test(username);
}

function validateEmail(email) {
  const reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
  return reg.test(email);
}

function validatePassword(password) {
  const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/;
  return reg.test(password);
}

绑定事件监听器

接下来，我们需要在每个需要验证的输入字段上绑定事件监听器，当输入字段中的数据发生变化时，触发验证函数进行验证。

inputs.forEach((input) => {
  input.addEventListener('input', () => {
    const value = input.value;
    const name = input.name;
    const isValid = validate(name, value);
    if (isValid) {
      // 验证通过
    } else {
      // 验证失败
    }
  });
});

提交表单

最后，我们需要在表单上绑定提交事件监听器，当用户点击提交按钮时，触发表单提交事件，此时我们需要对表单中的数据进行验证，如果验证通过，则提交表单，否则阻止表单提交。

form.addEventListener('submit', (e) => {
  e.preventDefault();

  // 验证表单数据
  const isValid = validateForm();
  if (isValid) {
    // 表单验证通过，提交表单
    form.submit();
  } else {
    // 表单验证失败，阻止表单提交
    alert('请检查表单中的数据！');
  }
});

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <form id="form">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="email" name="email" placeholder="请输入邮箱">
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="提交">
  </form>

  <script>
    // 获取表单元素
    const form = document.getElementById('form');
    const inputs = form.querySelectorAll('input');

    // 编写验证函数
    function validateUsername(username) {
      const reg = /^[a-zA-Z0-9_]{3,16}$/;
      return reg.test(username);
    }

    function validateEmail(email) {
      const reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      return reg.test(email);
    }

    function validatePassword(password) {
      const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/;
      return reg.test(password);
    }

    // 绑定事件监听器
    inputs.forEach((input) => {
      input.addEventListener('input', () => {
        const value = input.value;
        const name = input.name;
        const isValid = validate(name, value);
        if (isValid) {
          // 验证通过
        } else {
          // 验证失败
        }
      });
    });

    // 提交表单
    form.addEventListener('submit', (e) => {
      e.preventDefault();

      // 验证表单数据
      const isValid = validateForm();
      if (isValid) {
        // 表单验证通过，提交表单
        form.submit();
      } else {
        // 表单验证失败，阻止表单提交
        alert('请检查表单中的数据！');
      }
    });
  </script>
</body>
</html>