---

jQuery Validate技术文档

什么是jQuery Validate

jQuery Validate是一款基于jQuery的开源插件，主要用于表单验证。它提供了多种验证方式，例如必填、数字、邮箱、手机等常用验证规则，同时也支持自定义规则。使用jQuery Validate可以简便地实现前端表单的验证功能，同时还可以优化用户体验。

基本使用方法

引入jQuery和jQuery Validate

在标签中引入jQuery和jQuery Validate：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

为表单添加id和name

为需要验证的表单元素添加id和name属性，例如：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>
  
  <button type="submit">提交</button>
</form>

编写验证规则

使用$.validator.addMethod()方法可以添加自定义的验证规则：

$.validator.addMethod("phone", function(value, element) {
  var reg = /^1[3|4|5|7|8][0-9]{9}$/;
  return this.optional(element) || reg.test(value);
}, "请输入正确的手机号码");

初始化验证器

使用$.validate()方法初始化验证器，同时可以配置验证规则和错误提示信息：

$("form").validate({
  rules: {
    username: {
      required: true,
      minlength: 4,
      maxlength: 16
    },
    password: {
      required: true,
      minlength: 6,
      maxlength: 16
    },
    phone: {
      phone: true
    }
  },
  messages: {
    username: {
      required: "请输入用户名",
      minlength: "用户名长度不能少于4个字符",
      maxlength: "用户名长度不能超过16个字符"
    },
    password: {
      required: "请输入密码",
      minlength: "密码长度不能少于6个字符",
      maxlength: "密码长度不能超过16个字符"
    },
    phone: {
      phone: "请输入正确的手机号码"
    }
  }
});

验证规则配置

常用的验证规则

• required - 必填项
• number - 数字
• email - 邮箱
• url - 网址
• date - 日期（格式为yyyy-mm-dd）

可以在rules中配置这些默认的验证规则，例如：

rules: {
  username: {
    required: true,
    minlength: 4,
    maxlength: 16
  },
  email: {
    required: true,
    email: true
  },
  phone: {
    required: true,
    phone: true
  }
}

自定义验证规则

使用$.validator.addMethod()方法可以添加自定义的验证规则，例如：

$.validator.addMethod("phone", function(value, element) {
  var reg = /^1[3|4|5|7|8][0-9]{9}$/;
  return this.optional(element) || reg.test(value);
}, "请输入正确的手机号码");

验证规则参数

可以在验证规则后添加参数，例如：

rules: {
  password: {
    required: true,
    minlength: 6,
    maxlength: 16
  },
  confirm_password: {
    required: true,
    equalTo: "#password"
  }
}

以上配置表示确认密码必须和密码相同。

错误提示信息配置

使用messages配置项可以为每个表单元素设置错误提示信息，例如：

messages: {
  username: {
    required: "请输入用户名",
    minlength: "用户名长度不能少于4个字符",
    maxlength: "用户名长度不能超过16个字符"
  },
  email: {
    required: "请输入邮箱地址",
    email: "请输入正确的邮箱地址"
  },
  password: {
    required: "请输入密码",
    minlength: "密码长度不能少于6个字符",
    maxlength: "密码长度不能超过16个字符"
  },
  confirm_password: {
    required: "请再次输入密码",
    equalTo: "两次输入的密码不一致"
  }
}

在messages中设置了每个表单元素对应的错误提示信息。

验证前和验证后的回调函数

使用$.validate()方法可以传递验证成功和验证失败的回调函数，例如：

$("form").validate({
  submitHandler: function(form) {
    alert("提交成功！");
  },
  invalidHandler: function() {
    alert("表单验证失败！");
  }
});

submitHandler用于在表单验证通过后执行的回调函数，invalidHandler用于在表单验证失败后执行的回调函数。

总结

jQuery Validate是一款非常实用的表单验证插件，可以简洁地实现前端表单验证功能。本文介绍了jQuery Validate的基本使用方法和常用配置项，通过细致的实例化介绍，你现在已经可以轻松上手jQuery Validate。