JQuery.Validator扩展

 

转载：http://blog.sina.com.cn/s/blog_76e3325d0100oxi9.html

    最近在用jquery的validate.js插件做表单验证，一般的普通表单验证还好，基本没什么问题，但是在涉及到动态添加表单元素的时候，就会不那 么好用了，比如我们经常会碰到一些动态添加表格的操作，怎样将我们动态加入的表单元素也加入到validate中呢，琢磨了老半天，也找到了一些方法，基 本如下:

    jquery.validate.js的校验基本如下：

  var validator = $("#addform").validate({ debug: true, showErrors: showErrors, rules: { 'supplier.nsupplierno': { required: true, maxlength:20 } }, messages: { 'supplier.nsupplierno': { required:"请填写供应商编号", maxlength:"最大长度为20" } } });  

分析一下，其实它的rules无非也就是一个对象而已，那么在校验的时候，只要我们动态添加的表单元素在这两个对象里应该就可以了，也就是在即将校验之前，于是就有了下面的：

$("#aSubmit").click(function() { var saddress=new Rule('a','{required:true,maxlength:50}','{required:"请填写供应商地址",maxlength:"最大长度为100"}'); addRules(window.validator,saddress); if(window.validator.form()) { document.forms[0].action=""; document.forms[0].submit(); } }); window.validator = $("#addform").validate({ debug: true, showErrors: showErrors, rules: { 'supplier.nsupplierno': { required: true, maxlength:20 } }, messages: { 'supplier.nsupplierno': { required:"请填写供应商编号", maxlength:"最大长度为20" } } });

其中，$("#aSubmit")为提交按钮，相信大家看到这一段也就明白了吧，具体思路是创建一个新的规则，然后将其添加到rules对象中去即可，呵呵，还挺好用的。

其他相关脚本如下：

function Rule(nameArg,rulesArg,messageArg) { this.name=nameArg; this.rules=rulesArg; this.message=messageArg; this.getRules=function(){ return eval_r("({"+nameArg+":"+rulesArg+"})"); }; this.getMessages=function(){ return eval_r("({"+nameArg+":"+messageArg+"})"); }; } function addRules(validator, rule) { var empty = {} var rules = $.extend(empty, validator.settings.rules, rule.getRules()); validator.settings.rules=rules; var empty = {} var messages = $.extend(empty, validator.settings.messages, rule.getMessages()); validator.settings.messages=messages; } function showErrors(){ var t = this; for ( var i = 0; this.errorList[i]; i++ ) { //alert(this.idOrName(this.errorList[i].element)); $('img[htmlfor="success_'+ this.idOrName(this.errorList[i].element) + '"]').hide(); var error = this.errorList[i]; this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass ); var elename = this.idOrName(error.element); // 错误信息div var errdiv = $('div[htmlfor='+ elename + ']'); var errimg = $('img[htmlfor='+ elename + ']'); if(errdiv.length == 0){ // 没有div则创建 } if(errimg.length == 0){ // 没有img则创建 errimg = $('<img alt="'+error.message+'" src="admin/js/jquery-validate/images/unchecked.gif" mce_src="admin/js/jquery-validate/images/unchecked.gif">') errimg.attr({"for": this.idOrName(error.element), generated: true}); errimg.insertAfter(error.element); }else { errimg.attr("alt", error.message); } errimg.show(); // 鼠标放到图片显示错误 $(errimg).hover(function(e){ $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 显示在鼠标位置偏移20的位置 $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeIn(200); }, function(){ $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeOut(200); }); // 鼠标放到控件上显示错误 $(error.element).hover(function(e){ $('div[htmlfor="'+ t.idOrName(this) + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 显示在鼠标位置偏移20的位置 $('div[htmlfor="'+ t.idOrName(this) + '"]').fadeIn(200); }, function(){ $('div[htmlfor="'+ t.idOrName(this) + '"]').fadeOut(200); }); } // 校验成功的去掉错误提示 for ( var i = 0; this.successList[i]; i++ ) { $('div[htmlfor="'+ this.idOrName(this.successList[i]) + '"]').remove(); $('img[htmlfor='+ this.idOrName(this.successList[i]) + ']').hide(); var success = this.successList[i]; var elename = this.idOrName(success); var successimg = $('img[htmlfor="success_'+ elename + '"]'); if(successimg.length == 0){ // 没有img则创建 successimg = $('<img src="admin/js/jquery-validate/images/checked.gif" mce_src="admin/js/jquery-validate/images/checked.gif">') successimg.attr({"for": 'success_'+this.idOrName(success), generated: true}); successimg.insertAfter(success); } successimg.show(); } // 自定义高亮 if (this.settings.unhighlight) { for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) { this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass ); } } } $.extend({ getLeft : function(object) { var go = object; var oParent, oLeft = go.offsetLeft; while (go.offsetParent != null) { oParent = go.offsetParent; oLeft += oParent.offsetLeft; go = oParent; } return oLeft; }, getTop : function(object) { var go = object; var goHeight = go.height; var oParent, oTop = go.offsetTop; while (go.offsetParent != null) { oParent = go.offsetParent; oTop += oParent.offsetTop; go = oParent; } return oTop + 22;// 之所以加22不加控件高度,为了兼容ie6. } });

呵呵，希望对大家有所帮助！