jQuery - 学习笔记 - jQuery Validation Plugin

基本用法

一般项目中还会对它做一下封装。

$(function(){
    $( "#表单id").validate({
        rules: {
            标签甲name: { // 对应要验证的元素，支持多个
           		验证规则a: 条件 // 验证规则，支持多个
            } 
        },
        messages: { // 自定义失败提示信息（不写会用默认的）
            标签甲name: { // 与上面的规则对应
                验证规则a: "你写的什么鬼？"
            }
        }
    });
});

if(!$( "#表单id" ).validate()) { // 执行验证
	alert( "验证结果: " + $("#表单id")valid()); // 显示结果
    return;
}

初始化参数

validate()方法还提供了一堆可选参数。
比如：验证成功/失败的提示样式、放置位置、验证的时机、自定义忽略标记等等。
详见： 菜鸟教程 jQuery.validate 中文 API 已经够用了，这里就不造轮子了。

添加自定义验证规则

官方提供了扩展接口 jQuery.validator.addMethod() 用于添加规则。
并且官方还推荐了个用来写扩展规则的地方：additional-methods.js 和主文件一起引用即可。
所以最好不要直接去改 jquery.validate.js

/**
 * 自定义正则验证 ： pattern 就是 validate 方法参数中的 "验证规则x"
 * @param value		被验证的值 (通常就是 input、text 的内容)
 * @param element	被验证的元素 (通常就是 input、text)
 * @param param		验证的条件 (我们传个想要的正则表达式，这里就会用它来对 value 进行验证)
 * @returns {boolean} 符合条件返回 true
 */
$.validator.addMethod("pattern", function(value, element, param) {
	if (this.optional(element)) {
		return true;
	}
	if (typeof param === "string") {
		param = new RegExp(param );
	}
	return param.test(value);
}, "验证失败！"); 

用法：

$(function(){
    $( "#表单id").validate({
        rules: {
            标签甲name: { // 对应要验证的元素
           		pattern: '^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\\d{8}$' // 验证规则
            } 
        }
        ...
    });
});

自定义错误提示

验证隐藏域

场景：富文本。真正提交的是一个隐藏的输入框。可以参考菜鸟教程DEMO：Query 插件: 使用 TinyMCE 进行交互
对于隐藏域，通常我们需要做两件事。

1. 在配置参数中忽略改为空。默认是:hidden。
2. 隐藏域本身就看不见，我们要定义提示信息在哪显示。（对于标红要显示的富文本的输入框中）

$("#form").validate({
    ignore: "", // 取消忽略，或改为其它你需要的选择器
    rules: "略",
    messages: "略",
    // 更改错误信息显示的位置
    // 如果name是我富文本的隐藏域，其它元素统一把错误信息放在验证的元素后面。
    errorPlacement: function(error, element) { 
        if(element.is("input[name='myText']")){ 
        	alert("正文不能为空！"); 
        }else{ 
        	error.appendTo(element.parent());
        } 
	}
});

验证一组复选框 checkbox

$("#form").validate({
	ignore: "", // 取消忽略，或改为其它你需要的选择器
    rules: {
    	role:{ required:true } // 角色复选框必选其一
	},
    messages: "略",
	/**
      * 自定义添加错误信息位置
      * @param error         错误标签
      * @param element       验证元素
      */                
     errorPlacement : function(error, element) {
         // 如果是radio或checkbox
         if (element.is(':radio') || element.is(':checkbox')) {  
             var $container = $(element).closest('.checkboxContainer');       // 获取当前元素符合 checkboxContainer 的上级容器。
             $container.append(error);                               // 向容器中添加错误提示信息。
         } else {
             error.insertAfter(element);
         }
     },
     /**
      * 验证失败提示效果（验证失败时触发）
      * @param element       验证元素
      * @param errorClass    失败样式
      * @param validClass    成功样式
      */
     highlight: function(element, errorClass, validClass) {
         var $ele = $(element);
         // 如果是radio或checkbox
         if ($ele.is(':radio') || $ele.is(':checkbox')) {  
             var $container = $ele.closest('.checkboxContainer'); // 当前元素的祖上符合 checkboxContainer 的上级容器
             $container.addClass('error-checkbox');               // 添加 class 设置容器样式
         } else {
             $ele.addClass(errorClass);
         }
     },
     /**
      * 验证成功提示效果（通过验证时触发）
      */
     unhighlight: function(element, errorClass, validClass) {
         debugger
         var $ele = $(element);
         // 如果是radio或checkbox
         if ($ele.is(':radio') || $ele.is(':checkbox')) {  		
             var $container = $ele.closest('.checkboxContainer'); // 当前元素的祖上符合 checkboxContainer 的上级容器
             $container.removeClass('error-checkbox');            // 添加 class 设置容器样式
         } else {
             $ele.removeClass(errorClass);
         }
     }
});


/**
 * 复选框 change 也想触发验证。(这里用到了 jQuery iCheck插件)
 * 同时复选框是动态创建的，所以用 .on 动态绑定。
 */
 $('#myRoles input[type="checkbox"]').on('ifChanged', function(event){
     $('[name="role"]').valid();
 });

错误信息控制

配置中支持以下属性来控制错误提示。参考：菜鸟教程

属性	描述
errorClass	类型 String，默认 “error”。指定错误提示的 css 类名，可以自定义错误提示的样式。
errorElement	类型 String，默认 “label”。指定使用什么标签标记错误。
wrapper	类型 String，指定使用什么标签再把上边的 errorELement 包起来。
errorLabelContainer	类型 Selector，把错误信息统一放在一个容器里面。
showErrors	跟一个函数，可以显示总共有多少个未通过验证的元素。
errorPlacement	跟一个函数，可以自定义错误放到哪里。
highlight	可以给未通过验证的元素加效果、闪烁等。

设置默认配置

jQuery.validator.setDefaults()

参考资料

jQuery Validation Plugin 官网
jQuery Validation Plugin 文档
Github 下载地址
jQuery Validate | 菜鸟教程

湖边的小屋圣迹：验证规则收集

jQuery iCheck插件