jQuery.validate 表单动态验证

jQuery.validate 表单动态验证

实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码 )。
也可以选择使用jQuery.validate提供的动态校验方法。


图1.1 需要校验的HTML页面
js文件内容如下：
var   oTab = document.getElementById( 'addAppDetailTab' );
//获取表格的行数
var   id = oTab !=  null   ? oTab.tBodies[0].rows.length : 0;
$( function () {
//点击添加，为表格追加一行
     $( '#addAppDetailBtn' ).click( function   () {
         var   oTr = document.createElement( 'tr' );
         var   oTd = document.createElement( 'td' );
         oTd.appendChild(oTr);
         oTab.appendChild(oTr);
         createTD(oTab);
     });
});
//为表格追加一行的方法
function   createTD(oTab) {
     //var id = $('#addAppDetailTab').attr('tabTrIndex');
     //id = id ? id : 1;
     $( '#addAppDetailTab' ).attr( 'tabTrIndex' , id);
     var   oTr = document.createElement( 'tr' );
     var   oTd = document.createElement( 'td' );
     oTd.innerHTML =  '<div class="td validation-box"><input class="form-control" style="width:70px" value="" id="appDetailVOList['   + id +  '].version" name="appDetailVOList['   + id +  '].version"></div>' ;
     oTr.appendChild(oTd);
      
     var   oTd = document.createElement( 'td' );
     oTd.innerHTML =  '<div class="td validation-box"><input class="form-control" style="width:120px" οnclick="WdatePicker({skin:\'mag\',dateFmt:\'yyyy-MM-dd HH:mm:ss\'})" value="" id="appDetailVOList['   + id +  '].updateTime" name="appDetailVOList['   + id +  '].updateTime"></div>' ;
     oTr.appendChild(oTd);
      
     var   oTd = document.createElement( 'td' );
     oTd.innerHTML =  '<div class="td validation-box"><input class="form-control wdate" style="width:50px" value="" name="appDetailVOList['   + id +  '].appSize"><span>MB</span></div>' ;
     oTr.appendChild(oTd);
      
     var   oTd = document.createElement( 'td' );
     //添加beetl表达式
     var   copy = $( '#platformListDiv' ).clone();
     copy.find( ".select-text" ).attr( "id" ,  "appDetailVOList["   + id +  "].platform" );
     copy.find( ".select-text" ).attr( "name" ,  "appDetailVOList["   + id +  "].platform" );
      
     copy.appendTo(oTd);
     oTr.appendChild(oTd);
      
     var   oTd = document.createElement( 'td' );
     oTd.innerHTML =  '<div class="td validation-box"><input class="form-control" style="width:200px" value="" name="appDetailVOList['   + id +  '].url"></div>' ;
     oTr.appendChild(oTd);
      
      
     var   oTd = document.createElement( 'td' );
     oTd.innerHTML =  '<div class="td"><a href="javascript:;" id="deleteAppVersion_'   + id +  '" name="deleteAppVersion_'   + id +  '">删除</a></div>' ;
     oTr.appendChild(oTd);
      
     oTd.getElementsByTagName( 'a' )[0].onclick =  function () {
         var   appNum = oTab !=  null   ? oTab.tBodies[0].rows.length : 0;
         var   id = $( this ).attr( 'id' );
         var   trIndex = id.substring(id.indexOf( '_' ) + 1, id.length);
         $( '#addAppDetailTab' ).attr( 'tabTrIndex' , trIndex);
         if   (appNum >= 2) {
             oTab.tBodies[0].removeChild( this .parentNode.parentNode.parentNode);
         }  else   {
             $( this ).parent().addClass( 'validation-box' );
             $( this ).after(getValidShowErrorHtml( "必须填写一行APP版本信息" , $( this ).attr( 'name' )));
         }
         $( '#addAppDetailBtn' ).show();
     }
     oTab.tBodies[0].appendChild(oTr);
     id ++;
}
 
//保存表单信息的方法
function   save() {
     doAppValidate( 'app_submit_form' );
   var   flag = $( "#app_submit_form" ).valid(); 
   if (!flag){
         return ;
   }
  var   dataArray = formArrayUtil($( "#app_submit_form" ).serializeArray())[0];
  console.log(dataArray);
}
 
 
/**
  * 校验  
  * @param formid
  */
/**
  * desc:特殊字符验证
  */
jQuery.validator.addMethod( "specialCharValidate" ,  function (value, element, param) {
     var   pattern =  new   RegExp( "[`~!@%#$^&*()=|{}':;',　\\[\\]<>/? \\.；：%……+￥（）【】‘”“'。，、？]" ); 
     return   this .optional(element)||!pattern.test(value) ; 
},  "请不要输入特殊字符" );
 
jQuery.validator.addMethod( "positiveNumValidate" ,  function (value, element, param) {
     var   strRegex =  "^[0-9]+(.[0-9]{2}|.[0-9])?$" ;
     var   pattern =  new   RegExp(strRegex);
     if   (value !=  "" ) {
         if   (!pattern.test(value)) {
             return   false ;
         }
     }
     return   true ;
},  "请输入正数(小数或整数)" );
 
 
var   rules4Volidate = {
     name : {
         required :  true ,
         maxlength : 24
     },
     icon : {
         required :  true ,
         maxlength : 100
     },
     desc : {
         required :  true ,
         maxlength : 100
     },
     author : {
         required :  true ,
         maxlength : 24
     },
     email : {
         required :  true ,
         email :  true
     },
     webUrl : {
         maxlength : 100,
         url :  true
     },
     reqdata : {
         required :  true
     },
     jcaptchaCode : {
         required :  true
     }
};
 
var   messages4Volidate = {
     name : {
         required :  "请输入应用名称" ,
         maxlength :  "名称长度不能超过24个字符"
     },
     icon : {
         required :  "请选择应用图标" ,
     },
     desc : {
         required :  "请输入应用描述" ,
         maxlength :  "应用描述不能超过100个字符"
     },
     author : {
         required :  "请填写开发者"
     },
     email: {
         required :  "请填写开发者邮箱" ,
         email :  "请输入正确的email地址"
     },
     webUrl : {
         maxlength :  "下载链接不能超过100个字符" ,
         url :  "请输入合法的URL"
     },
     reqdata : {
         required :  "请填写所用数据"
     },
     jcaptchaCode : {
         required :  "请填写验证码"
     }
};
 
//动态改变rules4Volidate(JSON格式) 的值
function   getRules(formid) {
     if   ($( "#"   + formid).find( "tr" ).length > 0) {
         // 开始逐行验证
         $( "#"   + formid).find( "tr" ).each(
             function   (index, tr) {
                 $( this ).find( "input" ).each( function () {
                     var   nameValue = $( this ).attr('name');
                      
                     var   idValue =  this ;
                     if   (nameValue.indexOf( "].version" ) != -1) {
                         rules4Volidate[nameValue] = {required :  true , maxlength : 12, positiveNumValidate :  true };
 
                         messages4Volidate[nameValue] = {required :  "请正确填写APP版本" , positiveNumValidate:  "请输入正数(小数或整数)" };
                     }  else   if   (nameValue.indexOf( "].updateTime" ) != -1) {
                         rules4Volidate[nameValue] = {required :  true };
 
                         messages4Volidate[nameValue] = {required :  "请正确填写APP版本" };
                     }  else   if   (nameValue.indexOf( "].appSize" ) != -1) {
                         rules4Volidate[nameValue] = {required :  true , maxlength : 6, positiveNumValidate:  true };
 
                         messages4Volidate[nameValue] = {required :  "请正确填写APP大小" , maxlength :  "APP大小长度不能超过6位" , appSizeValidate:  "请输入正数(小数或整数)" };
                     }  else   if   (nameValue.indexOf( "].platform" ) != -1) {
                         rules4Volidate[nameValue] = {required :  true };
 
                         messages4Volidate[nameValue] = {required :  "请正确填写APP运行平台" };
                     }  else   if   (nameValue.indexOf( "].url" ) != -1) {
                         rules4Volidate[nameValue] = {required :  true , maxlength : 100, url :  true };
 
                         messages4Volidate[nameValue] = {required :  "请正确填写APP下载地址" , maxlength :  "APP下载地址长度不能超过6位" , url :  "请输入合法的URL地址" };
                     }
                 });
             }
         );
     }
}
 
function   doAppValidate(formid){
//获取当前rules4Volidate 的值
     getRules(formid);
/*删除jQuery.volidate上一次表单验证添加的validator数据,不删除的话第二次校验不生效。原因如下图代码*/
     $("#" + formid).removeData("validator");//这个是动态拼串的方式生效的关键
     $( "#"   + formid).validate({rules : rules4Volidate, messages: messages4Volidate, errorPlacement : validErrorFunction,
         success : validSuccessFunction});
}


图1.2 jQuery.validate源码
————————————————
版权声明：本文为CSDN博主「aa1bb1cc2」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/aa1bb1cc2/article/details/80724971