一个安全、轻量的JavaScript表单验证器

2024-02-14 09:16:34

在现代化的web应用开发中，表单是必不可少的元素。用户通过表单可以提交各种各样的信息，包括个人信息、联系方式、登录信息等等。为了确保这些信息的准确性和安全性，表单验证就显得尤为重要。

JavaScript是一种流行的编程语言，经常被用来创建表单验证器。JavaScript表单验证器的优势在于它可以轻松地嵌入到网页中，并且可以根据需要进行自定义。

本文将介绍一个JavaScript表单验证器，它具有以下特点：

安全：该验证器使用严格的验证规则，可以有效地防止恶意输入和数据篡改。
轻量级：该验证器仅包含核心类，代码量仅21行，非常轻量级。
易于使用：该验证器提供了简单的API，可以轻松地集成到您的web应用中。

下面是该验证器的核心类：

class Validator {
  constructor(form) {
    this.form = form;
    this.errors = [];
  }

  validate() {
    this.errors = [];
    const inputs = this.form.querySelectorAll('input[required]');
    for (const input of inputs) {
      if (!input.value) {
        this.errors.push({
          input: input,
          message: '必填项'
        });
      }
    }
    return this.errors.length === 0;
  }

  getErrors() {
    return this.errors;
  }
}

下面是一个简单的例子，演示如何使用该验证器：

<form id="form">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('form');
  const validator = new Validator(form);

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

    if (validator.validate()) {
      // 表单验证通过，提交表单
      form.submit();
    } else {
      // 表单验证失败，显示错误信息
      const errors = validator.getErrors();
      for (const error of errors) {
        alert(error.message);
      }
    }
  });
</script>