jQuery Validate

jQuery Validate 是目前最流行的 jQuery 表单校验插件，它把"规则声明"与"校验逻辑"分离：你只需用 rules 描述每个字段的约束，插件就会在提交、失焦、按键时自动校验并显示错误提示。几分钟就能完成原本要写几十行 if 判断的表单校验，是每个 jQuery 开发者都该掌握的插件。

1. 引入插件

Validate 基于 jQuery，页面中须先引入 jQuery，再引入 validate 插件，推荐同时引入官方中文语言包：

<script src="https://example.com/jquery.min.js"></script>

说明：示例中的 https://example.com 地址为占位域名，实际使用请替换为官方 CDN 或本地文件路径。
<script src="https://example.com/jquery.validate.min.js"></script>
<script src="https://example.com/messages_zh.min.js"></script>

2. 基本用法

对表单调用 .validate()，在 rules 里声明规则、在 messages 里覆盖错误提示：

<form id="myform">
  姓名：<input type="text" name="name"><br>
  邮箱：<input type="text" name="email"><br>
  <input type="submit" value="提交">
</form>
<script>
$("#myform").validate({
  rules: {
    name: { required: true, minlength: 2 },
    email: { required: true, email: true }
  },
  messages: {
    name: { required: "请输入姓名", minlength: "姓名至少 2 个字" },
    email: { required: "请输入邮箱", email: "邮箱格式不正确" }
  }
});
// 效果：直接点"提交"，两个输入框下方出现红色错误提示且表单不发送；
// 邮箱框填 aaa 再失焦，会提示"邮箱格式不正确"
</script>

3. 常用内置规则

规则	含义	规则	含义
required	必填	email / url / date	邮箱 / 网址 / 日期格式
minlength / maxlength	最小 / 最大长度	rangelength	长度范围
min / max	数值上 / 下限	range	数值区间
number / digits	数字 / 正整数	equalTo	与另一字段相等

"确认密码"用 equalTo 指向原密码框即可：

rules: { pwd2: { required: true, equalTo: "#pwd" } }
// 效果：两次密码不一致时提示"请输入相同的值"（片段需放入 rules 配置中）

4. 自定义规则 addMethod

业务特殊规则（如手机号、身份证）用 $.validator.addMethod 扩展：

$.validator.addMethod("phone", function (value, element) {
  return this.optional(element) || /^1[3-9]\d{9}$/.test(value);
}, "请输入 11 位手机号");

$("#myform").validate({
  rules: { mobile: { required: true, phone: true } }
});
// 效果：手机号框填入 123 时提示"请输入 11 位手机号"

5. 进阶技巧

• 引入 messages_zh 后错误提示自动变中文，无需逐条手写 messages；
• errorPlacement 可自定义错误标签插入位置，方便套用 Bootstrap 等框架样式；
• focusCleanup：聚焦时自动清除该字段的错误提示，体验更友好；
• 与 AJAX 结合：在 submitHandler 回调里用 $.ajax 提交表单，实现无刷新"校验通过再提交"。

小结

Validate 用声明式 rules 替代手写判断，配合 addMethod 与中文包可覆盖绝大多数业务规则；再结合 submitHandler 做 Ajax 提交，是 jQuery 时代最省力的表单校验方案。