关于对jquery.validate表单验证插件问题的使用、多个name值相同会出错及自定义正则的方式

首先是引入jquery.validate文件，这就不多说了，直接进入正题，要注意的是，如果想要让默认的提示显示成中文，记得引入messages_zh.min.js文件哦，不需要的话就算了！然后开始进入正题

首先我创建一个表单

<form id="userInfoForm" method="post" action="">     
         <p>

            <label for="username">用户名</label>
            <input id="username" name="username" type="text" >
        </p>

</form>

然后就可以进行验证了

$("#userInfoForm").validate({ 
      onfocusout:false, //是否在失去焦点时触发验证 默认是true 这个可以忽略 
      rules: {
           username: { 
                required: true, //不能为空
                minlength: 2 //最少不能小于2个字符
           } 
     }, messages: { 
        username:"请正确填写信息" 
      } 
});

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

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

 if ($.validator) {
		    $.validator.prototype.elements = function () {  
		        var validator = this,  
		            rulesCache = {};  
		        return $([]).add(this.currentForm.elements)  
		        .filter(":input")  
		        .not(":submit, :reset, :image, [disabled]")  
		        .not(this.settings.ignore)  
		        .filter(function () {  
		            var elementIdentification = this.id || this.name;  
		            !elementIdentification && validator.settings.debug && window.console && console.error("%o has no id nor name assigned", this);  
		            if (elementIdentification in rulesCache || !validator.objectLength($(this).rules()))  
		                return false;  
		            rulesCache[elementIdentification] = true;  
		            return true;  
		        });  
		    };  
		}

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

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

最后是自定义正则

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

 addMethod的参数一是：创建一个唯一标识，方便使用，参数二是：回调函数 , 参数三是：输入错误时返回的结果
   
     jQuery.validator.addMethod("isUserName", function(value, element) {   
  	//回调函数中，参数一是：当前元素的值，参数二是：当前标签 

              var isPositiveInteger= /^([0-9]*[1-9][0-9]*)$/;
              return this.optional(element) || isPositiveInteger.test(value);

    }, "请输入正整数");
如果自定义的正则很多的话，还是建议，创建一个单独的js文件进行引用

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

  $("#userInfoForm").validate({
            	 onfocusout:false, //是否在失去焦点时触发验证   默认是true，这个可以忽略
                rules: {
                    username: {
                    	isUserName: true, //在这进行调用   就是使用addMethod中参数一的唯一标识
                        minlength: 2
                    }	
                },
                 messages: {
                 	username:"请正确填写信息"
                 }
            });

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

用上面的代码做例子，其实非常简单啦，就是给这个验证    声明一个变量，存起来，然后用form进行调用
var vali = $("#userInfoForm").validate({
            	onfocusout:false, //是否在失去焦点时触发验证
                rules: {
                    username: {
                    	isPositiveInteger: true,
                    	required: true,
                        minlength: 2
                    }	
                }
            });
            
            
            $(".submit").on("click",function(){
            	console.log(vali.form())   //如果验证通过，返回true否则，返回false；
            })

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

关于对jquery.validate表单验证插件问题的使用、多个name值相同会出错及自定义正则的方式

猜你喜欢