使用 jQuery Validate 进行表单验证

jQuery Validate简介

jQuery Validate 插件提供了强大的表单验证功能，能够让客户端表单验证变得更简单，同时它还提供了大量的可定制化选项，以满足应用程序的各种需求。该插件捆绑了一套非常有用的验证方法，包括 URL 和电子邮件验证，同时也提供了API允许用户自定义校验方法。提供的所有捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

引入 jQuery Validate

官网下载地址：https://github.com/jquery-validation/jquery-validation/releases

根据项目需要引入需要的 Js 库文件到 标签下或者在 标签关闭之前（推荐）。

   //页面内容 
   
   
   
  
 

注意事项：

1. 所有需要被校验的元素都必须有 name 属性，并且其取值在一个表单中必须唯一。

2. 同组的或元素 name 属性值相同。、

3. 复杂的 name 属性在定义 rules 选项时需要使用 "" 括起来。

$("#example_form").validate({
    rules: {
        // 不需要使用 "" 括起来
        name: "required",
        // 需要使用 "" 括起来
        "user[email]": "email",
        // 需要使用 "" 括起来
        "user.address.street": "required"
    }
});

4.推荐为每一个元素添加一个与其关联的元素，元素的 for 属性为元素的 id 属性。

默认校验规则

规则名称	类型	描述
required	Boolean	设置该项内容为必填
remote	Json|String	请求远程资源来校验内容有效性
minlength	Number	设置内容的最少字符长度
maxlength	Number	设置内容的最多字符长度
rangelength	Array	设置内容的字符长度范围
min	Number	设置内容的最小允许值
max	Number	设置内容的最大允许值
range	Array	设置内容的允许值范围
step	Number	设置内容为某一固定值的倍数
email	Boolean	设置该项内容为一个有效邮箱地址
url	Boolean	设置该项内容为一个有效网址
date	Boolean	设置该项内容为日期格式
dateISO	Boolean	设置该项内容为ISO日期格式
number	Boolean	设置该项内容为十进制小数
digits	Boolean	设置该项内容为十进制整数
equalTo	Selector	设置该项内容与指定元素内容相同
accept	String	设置上传文件所接受的 MIME 类型
creditcard	Boolean	设置该项内容为一个信用卡卡号
extension	String	设置上传文件所接受的扩展名
phoneUS	Boolean	设置该项内容为一个美国电话号码
require_from_group	Array	设置同一组至少填写多少项

插件功能

选择器

jQuery Validate 插件对 JQuery 库进行了扩展，增加了下面3个选择器：

:blank –选择所有值为空的元素

:filled – 选择所有值不为空的元素

:unchecked –选择所有未被选中的元素

方法

jQuery Validate 插件提供了3个非常重要的校验方法：

validate() – 对选中的表单进行校验

valid() – 判断选中的表单或元素输入的内容是否有效

rules() – 获取、添加或者移除元素的规则

方法应用示例

// 移除元素的所有校验规则
$("#user_age").rules("remove");
// 为元素添加 required max min 校验规则
$("#user_age").rules("add", {
    required: true,
    max: 100,
    min: 10
});
// 移除元素的 max min 校验规则
$("#user_age").rules("remove", "min max");

Validator

调用 validate() 方法将会返回一个 Validator 对象，该对象提供了很多方法，其中比较常用的方法列举如下。

Validator.form() – 校验表单

Validator.element() – 校验元素

Validator.resetForm() – 重置表单

Validator.showErrors() – 显示指定的错误信息

Validator.numberOfInvalids() – 显示无效的项目数量

Validator.destroy() –销毁Validator对象

方法应用示例

var validator = $("#example_form").validate();
validator.element("#user_age");
validator.showErrors({
    "userAge": "年龄输入格式不合法"
});
validator.form();
console.log(validator.numberOfInvalids() + " 个字段无效");
validator.resetForm();
validator.destroy();

静态方法

同时，Validator对象还提供了下面几个静态方法。

jQuery.validator.addMethod() – 添加一个自定义的校验方法

jQuery.validator.format() – 使用参数替换掉 {n} 占位符

jQuery.validator.setDefaults() – 修改校验器的默认选项

jQuery.validator.addClassRules() – 为某一类元素添加校验规则

应用示例

对以上注册信息进行验证，完整代码如下。

 
    
   
  
  
  
 
   
 
    
填写注册信息
 
    
 登录名  
 
    
 年龄  
 
    
 生日  
 
    
 信用卡号  
 
    
 月薪  
 
    
 流水证明  
 
    
 家庭电话  
 
    
 个人电话  
 
    
 个人头像  
 
    
 个人首页  
 
    
 输入密码  
 
    
 重复密码  
 
    
 邮件订阅  
 
    
 邮件地址  
 
    
 已阅读并同意注册协议