使用validate.js实现表单数据提交前的验证方法

实现表单数据提交前的验证是优化用户体验的重要步骤之一，这可以避免用户不必要的等待和提交失败的情况。validate.js 是一个轻量级的 JavaScript 库，可用于在提交前对表单数据进行验证，能够省去自己写正则表达式的麻烦，极大地简化表单验证的过程。

下面将介绍使用 validate.js 实现表单验证的具体步骤：

步骤 1：导入库

第一步是导入 validate.js 库，可以从官方网站 https://validatejs.org/ 下载或使用 CDN。

<!-- 使用CDN引入validate.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>

步骤 2：编写 HTML 表单

在 HTML 表单中，每个需要验证的元素都应该有一个 name 属性，这个值将成为表单验证规则的参数。示例代码如下：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name" />

  <label for="email">邮箱：</label>
  <input type="email" name="email" id="email" />

  <label for="phone">电话：</label>
  <input type="tel" name="phone" id="phone" />

  <button type="submit">提交</button>
</form>

步骤 3：定义规则

定义规则是指告诉 validate.js 如何验证表单输入。这可以通过一个 JavaScript 对象来完成，该对象应包含表单所有需要验证的字段以及验证规则，示例如下：

const constraints = {
  name: {
    presence: {
      message: "不能为空"
    },
    length: {
      minimum: 2,
      message: "不能少于2个字符"
    }
  },
  email: {
    presence: {
      message: "不能为空"
    },
    email: {
      message: "必须是有效的邮箱格式"
    }
  },
  phone: {
    presence: {
      message: "不能为空"
    },
    length: {
      minimum: 11,
      message: "不能少于11位"
    }
  }
};

以上 constraints 对象指定了每个字段需要验证的规则以及对应的错误提示信息。

步骤 4：触发验证并处理结果

当用户点击表单提交按钮时，需要将数据传递给 validate 函数进行验证。将此绑定到表单的 submit 事件即可。例如：

const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(form);

  const errors = validate(formData, constraints);
  if (errors) {
    // 处理错误信息
    console.log(errors);
  } else {
    //提交表单
    form.submit();
  }
});

在上面的示例中，首先使用 FormData 对象获取表单数据，然后将其传递给 validate 函数进行验证。如果验证失败，则会返回一个错误对象，可以根据具体情况进行错误处理；如果验证通过，则提交表单。

示例代码控制台输出错误信息

在第一个示例中，当你的名字字数小于 2 个字符时，将会提示错误信息：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name" />

  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById("myForm");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    const formData = new FormData(form);

    const constraints = {
      name: {
        presence: {
          message: "不能为空"
        },
        length: {
          minimum: 2,
          message: "不能少于2个字符"
        }
      }
    };

    const errors = validate(formData, constraints);
    if (errors) {
      console.log(errors);
    } else {
      form.submit();
    }
  });
</script>

示例代码显示错误信息

在第二个示例中，当你的手机号码不足 11 位时，将会显示错误信息：

<form id="myForm">
  <label for="phone">电话：</label>
  <input type="tel" name="phone" id="phone" />

  <div id="phoneError"></div>

  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById("myForm");
  const phoneError = document.getElementById("phoneError");

  form.addEventListener("submit", function(event) {
    event.preventDefault();
    const formData = new FormData(form);

    const constraints = {
      phone: {
        presence: {
          message: "不能为空"
        },
        length: {
          minimum: 11,
          message: "不能少于11位"
        }
      }
    };

    const errors = validate(formData, constraints);
    if (errors) {
      phoneError.innerHTML = errors.phone[0];
    } else {
      form.submit();
    }
  });
</script>

在这个示例中，在表单底部添加了一个 <div> 元素，用于显示错误信息。当表单提交时，如果验证失败，将错误信息显示在该元素上。