根据jquery validate验证插件改写

自网站刊登页改版以来使用的jq的验证插件已经使用一段时间，总结一下：

1.使用方便，通过json格式将每个要验证的控件传入进去.

2.扩展简便，如果插件自带的验证条件不满足，可以自定义验证函数。

当然也有不足点：

IE浏览器使用会很卡，验证会被执行多次，验证程序执行过程中占用过多的CPU，同样的验证会被执行多次，插件性能有待提高。

验证的取值默认是根据元素的name,要先与后端达成一致。

jq验证插件非常灵活，可以对其提供的一些接口和函数达到你想要的效果。

首先介绍下我根据我们网站需求更改后的版本:

页面格式：

jquery 插件公共验证：

//清除錯誤信息
function clear_error_info(param_rule){
	//循環綁定規則內元素的blur事件
	noblur_arr = param_rule.noblur;
	for(var rule_key in param_rule.rules){
		if(typeof noblur_arr == 'undefined'){
			$jq("#"+rule_key).blur(function (){
				clear_func($jq(this));
			});
		}
	}
}
function clear_func(this_elem){
	//驗證當前元素是否通過驗證
	if(this_elem.valid() > 0){
		//是否為單個元素對應的DIV
		if($jq("#parent_"+this_elem.attr("id")).length < 1){
			//找到組內的主驗證DIV
			$jq(this_elem.parents("td").find("div[id^=parent_]")).hide();
		}else{
			$jq("#parent_"+this_elem.attr("id")).hide();
		}
	}
}

//公共驗證函數 param_form：表單名 param_rule：驗證規則  param_callback：提交表單回調
function publicValid(param_form,param_rule,param_callback){
	//清除錯誤信息
	clear_error_info(param_rule);
	//調用驗證規則
	$jq("#"+param_form).validate(param_rule);
	//錯誤信息ajax提交
	if(typeof param_callback != "undefined"){
		$jq("#"+param_form).submit(function (){
			eval(param_callback+"()");
		})
	}
}
/* 輸出錯誤信息 */
function validError(errorMap,errorList,groups){
	var groupsArray = new Array();
	var error_info = "";
	if(errorList.length > 0){
		for(var list in errorMap){
			if(typeof groups[list] == "undefined"){
				errorMaplist = errorMap[list];
				//替换特殊name
				list = list.split("[]").join("");
				list = list.split(".").join("_");
				$jq("#parent_"+list+"_span").html(errorMaplist);
				$jq("#parent_"+list+"").show();
			}else{
				if($jq.inArray(groups[list],groupsArray) < 0){
					$jq("#parent_"+groups[list]+"_span").html(errorMap[list]);
					$jq("#parent_"+groups[list]+"").show();
					groupsArray.push(groups[list]);
				}
			}
			error_info += list + " ";
		}
		//輸出所有錯誤信息到隱含域（用於ajax提交錯誤信息）
		if($jq("#hid_error_info").length < 1){
			$jq("body").append("<input type='hidden' id='hid_error_info' value='' />");
		}
		$jq("#hid_error_info").val(error_info);
	}
}

页面引入公共验证插件JS，然后调用：

/* 刊登驗證規則 */
var _rule = {
	rules:{
		community_name:{
			required:true
		},
		.....(自定义验证规则)
	},
	messages:{
		community_name:"社區名稱為必填項，請填寫。",
		.....(自定义验证规则信息)
	},
	groups:{
		region:"region_id section_id street_id",
		finish_year:"finish_year finish_month"
	},
	showErrors:function(errorMap,errorList){
		validError(errorMap,errorList,this.groups);
	}
}
//刊登驗證
$jq(document).ready(function(){	
	publicValid("postForm", _rule);
});

这里只需要传入表单名和自定义验证的JSON变量就OK了，如果提交表单后需要继续执行自定义函数，可以传入第三个参数执行回调（一般用来绑定复杂的验证）。

注意点：

在显示页面错误信息的规则定义为：

外部包含一个DIV且ID为：parent_XXX（你验证对应的页面元素name），里面的SPAN id为：parent_XXX_span，class定义错误样式。如果要修改规则务必将validError函数内部 $jq("#parent_"+list+"_span") 和 $jq("#parent_"+list+") 一并修改。

同组内容验证规则：

当页面多个元素需要用到同一个验证，一般DIV ID为groups对应的key，即：

region:"region_id section_id street_id",

后续：

验证流程一般都大同小异，可能不同的一般都是显示错误信息。

function validError(errorMap,errorList,groups){

通过修改该函数就可以达到自己想要的错误信息显示效果，里面包含了页面所有错误信息的集合和分组的信息。