Notes:
First, the introduction of plug-ins
<script type= "Text/javascript" src= "js/jquery-1.10.0.js" ></script><script type= "Text/javascript" Src= "Js/jquery.validate-1.13.1.js" ></script>
Sample: A simple sign-in form verification
1 <formID= "LoginForm">2 <label for= "UserName">User name:</label>3 <inputtype= "text"ID= "User"name= "UserName" />4 <BR/><BR/>5 <label for= "PassWord">Password:</label>6 <inputtype= "Password"ID= "PassWord"name= "PassWord" />7 <BR/><BR/>8 <label for= "PassWord">Submit:</label>9 <inputtype= "Submit"ID= "Submit"name= "Submit" />Ten </form>
1$ (document). Ready (function(){2$ ("#loginForm"). Validate ({3rules:{//Defining Rules4 username:{5Requiredtrue,//must fill in6Minlength:3,//Minimum7Maxlength:20//Maximum8 },9 password:{TenRequiredtrue, OneMinlength:6, AMaxlength:16 - } - }, the //Design for Chinese tips -messages:{//defining the Prompt information - username:{ -Required: "User name must be filled in",//must fill in +MinLength: "User name Min. 3 Bits",//Minimum -MaxLength: "User name Max 20-bit"//Maximum + }, A password:{ atRequired: "Must fill in password",//must fill in -MinLength: "Password minimum 6 bit",//Minimum -MaxLength: "Password maximum 16 bit"//Maximum - } - } - }); in});
Alidate's API
Api:
$ (document). Ready (function(){ //Validate is the core approach to plug-ins, defining basic validation rules and some swimming configuration items$ ("#loginForm"). Validate ({debug:true,//true to indicate that the form will not be submitted and only checkedremote:{//remote checksum, remote.php as the address of the dataURL "Remote.json", type:"POST", data:{logintime:function(){ return+NewDate;//convert a character to a number}}}, rules:{//Defining Rulesusername:{Required:true,//must fill inMinlength:3,//MinimumMAXLENGTH:20,//Maximummin:,2//Minimum ValueMAX:20,//Maximum ValueRANGE:[2,20],//Value RangeEmailtrue,//email format, true must be e-mail formatUrl:true,//URL FormatDatetrue,//DateDateiso:true,//ISO dateNumbertrue,//DigitalDigitstrue,//integerEqualto: "#password",//equal to the value of another element, #password the value of the selectorMinlength:3,//MinimumMAXLENGTH:20,//MaximumRANGELENGTH:[3,20],//Length Range}, password:{required:true, minlength:6, MaxLength:16 } }, //Design for Chinese tipsmessages:{//defining the Prompt informationusername:{Required:"User name must be filled in",//must fill inMinLength: "User name Min. 3 Bits",//MinimumMaxLength: "User name Max 20-bit",//MaximumRemote: "User name does not exist"}, password:{required:"Must fill in the password",//must fill inMinLength: "Password minimum 6 bit",//MinimumMaxLength: "Password maximum 16 bit"//Maximum } } }); Valid ()//check whether the form or some elements are validRules ("Add", rules)//Add a validation rule to a FORM elementRules ("Remove", rules)//Delete Form element validation rules //Alidator ObjectThe Alidate method returns the Alidator object, Alidator object has many useful methods, as follows: Alidator.form ()//Verify that the form is valid and return True/falseAlidator.element (Element)//verifies that an element is valid, returns True/falseAlidator.resetform ()//restore the form to its original state before verificationAlidator.showerrors (Errors)//a specific error message is being displayed for an elementAlidator.numberofinvalids ()//returns the number of invalid elementsValidator Object static method: Jquery.validator.addMethod (Name,method [, message])//Add a custom validation methodJquery.validator.format (Template,argument,argumentn ...)//format the string with parameters instead of {n} in the templateJquery.validator.setDefaults (Options)//Modify plug-in default settingsJquery.validator.addClassRules (Name,rules)//Add a combination validation type for some class that contains the nameValidate ()//Method Configuration ItemsSubmithandler//You can add a form submission method by using a function that runs after validationInvalidhandler//functions that are not valid after a form is submitted, two parameters event and validatorIgnore//No validation of certain elementsRules//defining a validation ruleMessages//Pass definition prompt informationGroups//validation of a set of elements, with an error prompt, using Errorplacement to control where the error message is placedsuch as: SUBMITHANDLR:function(form) {$ajax ({}); }
jquery plugin, form validation validation plugin use