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

 

原文地址：https://www.cnblogs.com/webSnow/p/16354474.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

jquery.validate使用攻略（表单校验）
jquery.validate使用攻略（表单校验） 目录 jquery.validate使用攻略1 第一章&#160;jquery.validate使用攻略1 第二章&#160;jQuery.validate.js API7 Custom selectors7 Utilities8 Validato
清空字符串的空格（正则表达式）
/\s+/g和/\s/g的区别 正则表达式/\s+/g和/\s/g，目的均是找出目标字符串中的所有空白字符，但两者到底有什么区别呢？ 我们先来看下面一个例子： let name = &#39;ye wen jun&#39;;let ans = name.replace(/\s/g, &#39;&#3
自整理几个jquery.Validate验证正则
自整理几个jquery.Validate验证正则： 1. 只能输入数字和字母 /^[0-9a-zA-Z]*$/g jQuery.validator.addMethod(&quot;letters&quot;, function (value, element) { return this.optio
this.optional(element)的用法
this.optional(element)的用法 this.optional(element)是jquery.validator.js表单验证框架中的一个函数，用于表单控件的值不为空时才触发验证。 简单来说，就是当表单控件值为空的时候不会进行表单校验，此函数会返回true，表示校验通过，当表单控件
jQuery.validate 表单动态验证
jQuery.validate 表单动态验证 实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码 )。 也可
自定义验证之这能输入数字(包括小数 负数 )
自定义验证之这能输入数字(包括小数 负数 ) &lt;script type=&quot;text/javascript&quot;&gt; function onlyNumber(obj){ //得到第一个字符是否为负号 var t = obj.value.charAt(0); //先把非数字的都
validator.js——引入外部验证规则
// 引入了外部的验证规则 import { validateAccountNumber } from &quot;@/utils/validate&quot;; validator.js /*是否合法IP地址*/ export function validateIP(rule, value,cal
VUE开发--表单验证——正则
VUE开发--表单验证(六十三) 一、常用验证方式 vue 中表单字段验证的写法和方式有多种，常用的验证方式有3种： data 中验证 表单内容： &lt;!-- 表单 --&gt; &lt;el-form ref=&quot;rulesForm&quot; :rules=&quot;formRul
正则表达式—含座机的
正则表达式 座机的： 例子： 座机有效写法: 0316-8418331 (010)-67433539 (010)67433539 010-67433539 (0316)-8418331 (0316)8418331 正则表达式写法 0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d
js校验输入0-1之间的小数,最多保留小数点后两位
var reg = /^0\.[1-9]{0,2}$/;var linka = 0.1;console.log (reg.test (linka)); 0到1两位小数正则 ^(0\.(0[1-9]|[1-9]{1,2}|[1-9]0)$)|^1$ 不含0、0.0、0.00 // 验证是否是[1-10
input最大长度限制问题
input最大长度限制问题 &lt;input type=&quot;text&quot; maxlength=&quot;5&quot; /&gt; //可以 &lt;input type=&quot;number&quot; maxlength=&quot;5&quot; /&gt; //没有效
js输入验证是否为空、是否为null、是否都是空格—去掉所有空格
js输入验证是否为空、是否为null、是否都是空格 目录 1.截头去尾 trim 2.截头去尾 会去掉开始和结束的空格，类似于trim 3.会去掉所有的空格，包括开始，结束，中间 1.截头去尾 trim str=str.trim(); // 强烈推荐 最常用、最实用 or $.trim(str);
正则表达式语法大全以及match、search、replace、test的各自作用
正则表达式语法大全 字符串.match(正则)：返回符合的字符串，若不满足返回null 字符串.search(正则)：返回搜索到的位置，若非一个字符，则返回第一个字母的下标，若不匹配则返回-1 字符串.replace(正则,新的字符串)：找到符合正则的内容并替换 正则.test(字符串)：在字符串中
正整数正则表达式
正整数正则表达式正数的正则表达式(包括0，小数保留两位)： ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+\d)|0)$正数的正则表达式(不包括0，小数保留两位)： ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+
JS 正则验证 test()
JS 正则验证 test() /*用途：检查输入手机号码是否正确输入：s：字符串返回：如果通过验证返回true,否则返回false /function checkMobile(s){var regu =/[1][3][0-9]{9}$/;var re = new RegExp(regu);if (r
常用正则
请输入保留两位小数的销售价的正则： /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ 1.只能输入英文 &lt;input type=&quot;text&quot; onkeyup=&quot;value
判断价格的正则表达式
判断价格的正则表达式 价格的正则表达式 /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; 1 解析：价格符合两种格式 ^ [1-9]\d*(.\d{1,2})?$ ： 1-9 开头，后跟是 0-9，可以跟小数点，但小数点后要带上 1-2 位小数，类似 2,2
最实用的正则表达式整理
文章浏览阅读106次。这篇文章主要介绍了最实用的正则表达式整理,比如校验邮箱的正则，号码相关，数字相关等等，本文给大家列举的比较多，需要的朋友可以参考下。_/^(?:[1-9]d*)$/ 手机号
正则表达式总结，正则表达式匹配不包含某个字符串
文章浏览阅读1.2k次。4、匹配中的==、an==、== an9、i9 == "9i"和99p==请注意下面这部分的作用，它在匹配中间内容的时候排除了说明：当html字符串如下时，可以匹配到两处，表示匹配的字符串不包含and且不包含空白字符。说明：在上面的正则表达式中，_gvim正则表达式匹配不包含某个字符串
正则表达式匹配a标签的href
文章浏览阅读897次。【代码】正则表达式匹配a标签的href。_auto.js 正则匹配herf
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot