根据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("");
		}
		$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){

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


你可能感兴趣的:(jquery)