根据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){//是否為單個元素對應的DIVif($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];//替换特殊namelist = 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){

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