深入学习jQuery Validate表单验证（二）

在上一篇文章中，我们已经了解了如何使用jQuery Validate库进行基本的表单验证。在本篇文章中，我们将进一步学习该库的高级用法。

一、使用自定义规则

除了内置的验证规则之外，我们还可以创建自定义的规则。通过 $.validator.addMethod() 函数，我们可以创建自己的验证规则。

例如，我们想验证一个文本框中输入的数字是否为偶数。我们可以使用以下代码：

$.validator.addMethod("even", function (value, element) {
  return this.optional(element) || value % 2 === 0;
}, "请输入偶数");

上述代码中，我们使用了 addMethod() 函数添加了一个名为 even 的自定义规则。optional() 函数用于判断当前元素是否为可选的。如果当前元素为可选的，则返回 true，表示验证通过。如果当前元素不为可选的，则继续执行自定义规则的验证函数，该函数如下：

function (value, element) {
  return this.optional(element) || value % 2 === 0;
}

该函数接受两个参数：当前元素的值和当前元素本身。函数中的逻辑很简单，如果当前元素为可选的，则直接返回 true，表示验证通过。否则，如果当前元素的值为偶数，则返回 true，表示验证通过。最后，如果验证失败，函数的第三个参数将会作为错误消息。

我们可以像使用内置规则一样使用这个自定义规则：

$("form").validate({
  rules: {
    evennum: {
      required: true,
      even: true
    }
  },
  messages: {
    evennum: {
      required: "请输入数字",
      even: "请输入偶数"
    }
  }
});

上述代码中，我们将 even 规则应用在一个名为 evennum 的文本框上。

二、验证多个表单元素

在实际应用中，我们经常需要对多个表单元素进行验证。使用jQuery Validate库可以轻松实现这一点。只需在 rules 对象中定义多个规则，即可对多个表单元素进行验证。

例如，我们想验证一个表单中的用户名、密码和确认密码。要求用户名和密码不能为空，并且确认密码必须与密码一致。我们可以使用以下代码：

$("form").validate({
  rules: {
    username: "required",
    password: "required",
    confirm_password: {
      equalTo: "#password"
    }
  },
  messages: {
    username: "请输入用户名",
    password: "请输入密码",
    confirm_password: "两次输入的密码不一致"
  }
});

上述代码中，我们在 rules 对象中定义了三个规则：一个要求 username 不能为空，一个要求 password 不能为空，还有一个要求 confirm_password 的值必须与 password 的值相同。对于 confirm_password 的验证规则，我们使用了 equalTo 规则。