一、通过 HTML5 属性方式（基于元素属性自动验证）

jQuery Validate 可以自动读取表单元素上的一些 HTML5 标准验证属性，比如：

• required （必填）
• minlength （最小长度）
• maxlength （最大长度）
• pattern （正则表达式）
• type="email" （邮箱格式）
• type="url" （URL格式）

示例：

<form id="form1">
  <input type="text" name="username" required minlength="3" />
  <input type="email" name="email" required />
  <button type="submit">提交</button>
</form>

<script>
$("#form1").validate();
</script>

特点：

• 不用写额外的规则，直接利用元素属性即可。
• 简单快速，适合简单表单。

二、通过 JavaScript 对象规则方式（自定义规则配置）

你可以在初始化 validate() 时，通过 rules 和 messages 对象定义详细的校验规则和提示信息。

示例：

<form id="form2">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">提交</button>
</form>

<script>
$("#form2").validate({
  rules: {
    username: {
      required: true,
      minlength: 3
    },
    password: {
      required: true,
      minlength: 6
    }
  },
  messages: {
    username: {
      required: "用户名不能为空",
      minlength: "用户名至少3个字符"
    },
    password: {
      required: "密码不能为空",
      minlength: "密码至少6个字符"
    }
  }
});
</script>

特点：

• 规则灵活，支持各种复杂校验。
• 可以针对不同字段设置不同的验证逻辑和提示。

三、使用自定义验证方法（扩展验证）

jQuery Validate 支持通过 $.validator.addMethod() 自定义校验方法。

示例：

// 自定义验证手机号规则
$.validator.addMethod("phoneCN", function(value, element) {
  return this.optional(element) || /^1[3-9]\d{9}$/.test(value);
}, "请输入有效的中国手机号");

// 表单规则使用自定义方法
$("#form3").validate({
  rules: {
    phone: {
      required: true,
      phoneCN: true
    }
  },
  messages: {
    phone: {
      required: "手机号必填"
    }
  }
});

特点：

• 适用于需要业务特定校验逻辑时。
• 可以复用，方便维护。

小结