jQuery validate

(function($){     
$.fn.extend({     
pluginName: function (opt, callback) {     
          // Our plugin implementation code goes here.       
}     
})     
})(jQuery);   

 

       A jQuery function is defined above , and the formal parameter is $ . After the function definition is completed , the actual parameter of jQuery is passed in . Immediately call and execute. The advantage of this is that when we write jQuery plugins , we can also use the $ alias without causing conflicts with prototype .

This is a closure.

 

jQuery.validator.addMethod("math", function(value, element, params) {
  return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

jQuery.validator.addMethod("paramTest", function(value, element, params) {
  return this.optional(element) || value == params;
}, jQuery.validator.format("Please enter the correct value for {0}"));
	
	
$.validator.setDefaults({
    submitHandler: function() {
      alert("Submit event!");
    }
});
$().ready(function() {
    $("#commentForm").validate({
	   rules:{		   
	    name1111:{
		paramTest:"abc",
		required:function(){
			return true;//
		},
	    math:[1,2],
	   	rangelength:[1,2]
		}
	  }
    });
});

 

The minlength of the checkbox represents the minimum number that must be selected, maxlength represents the maximum number of selections, and rangelength:[2,3] represents the range of the number of selections.

 

The minlength of select represents the minimum number of selections (multiple selections are possible), maxlength represents the maximum number of selections, and rangelength:[2,3] represents the range of selections.

 

Attribute method:

rangelength=“3,5”

 

 

addMethod: function( name, method, message ) {
		$.validator.methods[name] = method;
		$.validator.messages[name] = message !== undefined ? message : $.validator.messages[name];
		if ( method.length < 3 ) {
			$.validator.addClassRules(name, $.validator.normalizeRule(name));
		}
	},

 

 

 

 

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>

 

 

 

meta String 方式，解析class="{validate:{ required:true,email:true }}"

$("#myform").validate({

   meta:"validate",

   submitHandler:function(){ 
alert("Submitted!")}})

 

<scripttype="text/javascript"src="js/jquery.metadata.js"></script><scripttype="text/javascript"src="js/jquery.validate.js"></script><formid="myform"><inputtype="text"name="email"class="{validate:{ required:true,email:true }}"/><inputtype="submit"value="Submit"/></form>