关于对jquery.validate表皇冠体育源码出售单验证插件问题的使用

首先是引入jquery.validate文件,这皇冠体育源码出售Q1157880099就不多说了,直接进入正题,要注意的是,如果想要让默认的提示显示成中文,记得引入messages_zh.min.js文件哦 ,不需要的话就算了!   然后开始进入正题

首先我创建一个表单

  1. <form id="userInfoForm" method="post" action="">       
  2.          <p>  
  3.   
  4.             <label for="username">用户名</label>  
  5.             <input id="username" name="username" type="text" >  
  6.         </p>  
  7.   
  8. </form>  

然后就可以进行验证了

[javascript] view plain copy
  1. $("#userInfoForm").validate({   
  2.       onfocusout:false//是否在失去焦点时触发验证 默认是true 这个可以忽略   
  3.       rules: {  
  4.            username: {   
  5.                 required: true//不能为空  
  6.                 minlength: 2 //最少不能小于2个字符  
  7.            }   
  8.      }, messages: {   
  9.         username:"请正确填写信息"   
  10.       }   
  11. });  

上面这一段js就是验证input中是否为空,且最小长度是两个字符以上,具体的一些默认验证要求我就不写在这了,大家查一下文档  都有的,需要注意的是:username找的是name中的username,我用红色标注了


然后就是多个name名字相同会出错的问题

  

[javascript] view plain copy
  1. if ($.validator) {  
  2.         $.validator.prototype.elements = function () {    
  3.             var validator = this,    
  4.                 rulesCache = {};    
  5.             return $([]).add(this.currentForm.elements)    
  6.             .filter(":input")    
  7.             .not(":submit, :reset, :image, [disabled]")    
  8.             .not(this.settings.ignore)    
  9.             .filter(function () {    
  10.                 var elementIdentification = this.id || this.name;    
  11.                 !elementIdentification && validator.settings.debug && window.console && console.error("%o has no id nor name assigned"this);    
  12.                 if (elementIdentification in rulesCache || !validator.objectLength($(this).rules()))    
  13.                     return false;    
  14.                 rulesCache[elementIdentification] = true;    
  15.                 return true;    
  16.             });    
  17.         };    
  18.     }    

其实很简单,就是将上面这段代码放在你验证的js文件中,或者自己创建一个js文件引入,  什么都不用改

这里要注意的是:一定要将相同name名字的id换成不同的,因为他是要根据id来进行区分的,如果不设id的话,那上面的代码也就没有什么用了


最后是自定义正则

         jQuery.validator有个方法是addMethod,使用addMethod就可以自定义正则来验证,如下代码:

[javascript] view plain copy
  1.  addMethod的参数一是:创建一个唯一标识,方便使用,参数二是:回调函数 , 参数三是:输入错误时返回的结果  
  2.      
  3.      jQuery.validator.addMethod("isUserName"function(value, element) {     
  4.     //回调函数中,参数一是:当前元素的值,参数二是:当前标签   
  5.   
  6.               var isPositiveInteger= /^([0-9]*[1-9][0-9]*)$/;  
  7.               return this.optional(element) || isPositiveInteger.test(value);  
  8.   
  9.     }, "请输入正整数");  
  10. 如果自定义的正则很多的话,还是建议,创建一个单独的js文件进行引用  

如何使用     就是在需要的name值名称下,添加addMethod参数一中的唯一标识,就拿上面的代码当例子:

[javascript] view plain copy
  1. $("#userInfoForm").validate({  
  2.              onfocusout:false//是否在失去焦点时触发验证   默认是true,这个可以忽略  
  3.               rules: {  
  4.                   username: {  
  5.                     isUserName: true//在这进行调用   就是使用addMethod中参数一的唯一标识  
  6.                       minlength: 2  
  7.                   }   
  8.               },  
  9.                messages: {  
  10.                 username:"请正确填写信息"  
  11.                }  
  12.           });  

还有一个就是如何不使用submita按钮进行验证,使用自己给定的按钮

[javascript] view plain copy
  1. 用上面的代码做例子,其实非常简单啦,就是给这个验证    声明一个变量,存起来,然后用form进行调用  
  2. var vali = $("#userInfoForm").validate({  
  3.                 onfocusout:false//是否在失去焦点时触发验证  
  4.                 rules: {  
  5.                     username: {  
  6.                         isPositiveInteger: true,  
  7.                         required: true,  
  8.                         minlength: 2  
  9.                     }     
  10.                 }  
  11.             });  
  12.               
  13.               
  14.             $(".submit").on("click",function(){  
  15.                 console.log(vali.form())   //如果验证通过,返回true否则,返回false;  
  16.             })  



以上就是在使用jquery.validate的时候遇到的一些坑,自己也是慢慢填平的,写的不好别喷我大笑

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页