jQuery Validate 使用详解【前端】

一、下载相关文件

      主要文件如下：

1.jquery.validate.min.js

2.additional-methods.min.js

      在页面中引入上面两个js文件

二、代码编写

      效果：

 

 

 

      index.html代码如下：

    
    
    
    
    
    
    
    


    

		

                

                    
商品出库
                
            
        

                

                        

                        	

                        		



                        	
                            

                            	

                                

                                    

                                        

                                            出库商品(Product)*
                                            
                                            	
                                            
                                        
                                        

                                            出库数量(Product Quantity)*
                                            
                                        
                                        

                                            经手人（Handler）*
                                            
                                        
                                        提交
                                        重置
                                    
                                
                            
                        	

                        		



                        	
                        
                
            
	
	
        
        
        
	
	
	
        
	
	
    

      main.js文件：

$(document).ready(function(){
	//获取商品列表
	$.getJSON("product/list/all.mvc",function(productList){
		$.each(productList,function(index,product){
			$("select#product").append(""+product.productName+"");
		});
	});
	 $("form#add").validate({
		  rules:{
			  productId:{
				  required:true
			  },
			  quantity:{
				  required:true,
				  min:1,
				  digits:true
			  },
			  handler:{
				  required:true
			  }
	 		
		  },
	      messages:{
	    	  productId:{
				  required:"请选择出库商品"
			  },
			  quantity:{
				  required:"请输入出库数量",
				  min:"出库数量必须是大于0的整数",
				  digits:"出库数量必须是一个的整数"
			  },
			  handler:{
				  required:"请填写经办人"
			  }
	      }
	  });
	  //拦截员工增加表单提交
	  $("form#add").ajaxForm(function(result){
		  if(result.status=='200'){
			  alert("操作成功！");
		  }
		  else{
			  alert(result.message);
		  }
	  });
});

三、自定义验证

      1.效果：

 

      2.编写main.js文件：

	//自定义验证
	jQuery.validator.addMethod("isMobile",function(value,element){
		var length=value.length;
		var mobile=/^1[34578]\d{9}$/;/*/^1(3|4|5|7|8)\d{9}$/*/
		return this.optional(element)||(length==11&&mobile.test(value));
	},"请正确填写您的手机号码");
	//验证邮箱
	jQuery.validator.addMethod("isEmail",function(value,element){
		var email=/^\w{1,16}@\w{1,16}.\w{2,4}$/;
		return this.optional(element)||email.test(value);
	},"请正确填写您的邮箱")
        $("form#add").validate({
		  rules:{
			  productId:{
				  required:true
			  },
			  quantity:{
				  required:true,
				  min:1,
				  digits:true,
				  isMobile:true
			  },
			  handler:{
				  required:true,
				  isEmail:true
			  }
	 		
		  },
	      messages:{
	    	  productId:{
				  required:"请选择出库商品"
			  },
			  quantity:{
				  required:"请输入出库数量",
				  min:"出库数量必须是大于0的整数",
				  digits:"出库数量必须是一个的整数",
				  isMobile:"手机号码格式错误"
			  },
			  handler:{
				  required:"请填写经办人",
				  isEmail:"邮箱格式错误"
			  }
	      }
	  });