Jquery-validate Plug-in

JQuery Validation Plugin

Advantages:
1. Form validation is simple and convenient, and many configuration items are available
2. Internationalization, you can customize the prompt information

Command-line Installation

Initialize Bower
Bower Init

Installing jquery using Bower
Bower Install jquery--save-dev

Installing the Jquery-validate plugin using bower
Bower Install Jquery-validate--save-dev

Installing angular with Bower
Bower Install angular--save-dev

Simplest effect:
<form id= "Demoform";
<fieldset>
<legend> user login </legend>
<p>
<label for= "username" style= "display:inline-block;width:80px;" > Username: </label>
<input type= "text" name= "username" id= "username"/>
</p>
<p>
<label for= "Password" style= "display:inline-block;width:80px;" > Password: </label>
<input type= "password" name= "password" id= "password"/>
</p>
<p>
<input type= "Submit"/>
</p>
</fieldset>
</form>

<script src= "Bower_components/jquery/dist/jquery.min.js" ></script>
<script src= "Bower_components/jquery-validation/dist/jquery.validate.min.js" ></script>
<script>
$ (' #demoForm '). Validate ({
Rules: {username and password inside//rules are property values of name, not ID
Username: {
Required:true,
Minlength:2,
Maxlength:10
},
Password: {
Required:true,
Minlength:2,
Maxlength:16
}
},
Messages: {
Username: {
Required: ' User name must be filled in ',
MinLength: ' No less than 2 bits ',
MaxLength: ' No more than 10 bits '
},
Password: {
Required: ' must fill in password ',
MinLength: ' No less than 2 bits ',
MaxLength: ' No less than 16 bits '
}
}
});
</script>

Note: The username and password in the rules are the property values of name, not the id "red bold"

Click the Submit button to not submit
$ (' #demoForm '). Validate ({
Debug:true
});

Basic Validation methods
Required must be filled
Remotes: ' Remote.php/remote.json ' remote check
MinLength min. length
MaxLength Maximum Length
Rangelength: [2, 10] length
Min min (represents the value of a number)
Max Maximum (represents the value of a number)
Range: [2, 10] Value range (represents the value of a number) (number between 2-10)
Email:true Email format
Url:true URL Format
Date:true Date
Dataiso:true date (in the format: YYY-MM-DD or YYY/MM/DD)
Number numbers
Digits integer
Equlato is equal to the value of another element

Advanced API
Valid () Method: Checks whether a form or some element is valid

$ (' #check '). Click (function () {
Console.log ($ (' #demoForm '). Valid ()? ' Form fill out correctly ': ' Form fill error ');
});

Rules () method (browser console input validation console)
1.rules () Gets the validation rules for an element of a form
$ (' #username '). Rules ();
Object {required:true, rangelength:array[2], remote: "Remote.json"}

2.rules (' Add ', rules) add a check rule to the form
$ (' #username '). Rules (' Add ', {minlength:2, maxlength:10});
Object {required:true, rangelength:array[2], Minlength:2, maxlength:10, Remote: "Remote.json"}

3.rules (' Remove ', rules) Delete FORM element validation rules
$ (' #username '). Rules (' Remove ', ' minlength maxlength ')
Object {minlength:2, maxlength:10}
$ (' #username '). Rules ()
Object {required:true, rangelength:array[2], remote: "Remote.json"}

Validator Object
The Validate () method returns the Validator object
Methods for Validator objects:
Validator.form () Verify that the form is valid and return True/false
Validator.element (Element) verifies that an element is valid and returns True/false
Validator.resetform () Restores the form to its previous state (the error message is erased)
Validator.showerrors (Errors) displays specific error messages for an element
Validator.numberofinvalids () returns the number of invalid elements (to trigger the validation of var bool = $ (' #demoForm '). Valid () to count)

Hint: in console console, Shift+enter is the next line, enter is submitted

Validator.showerrors ({
Username: ' You filled in the wrong, haha '
});

static method of validator object--Call directly
$.validator.addmethod (Name,method[,message]) add a custom validation method
$.validator.format (TEMPLATE,ARGUMENT,ARGUMENTN ...) format the string with parameters instead of {n} in the template
$.validator.setdefaults (options) modify plug-in default settings
$.validator.addclassrules (name,rules) adds a validation class to the element that contains the class property name in bulk (for instance, for elements classname "TXT")
Type

Validate () method configuration item (core content of the Jquery-validate plugin)
Submithandler a function that is run after validation, you can add a form submission method
Invalidhandler functions that run after an invalid form is submitted
Ignore does not validate certain elements
Rules define a validation rule
Messages defining the Prompt information
Groups the validation of a set of elements, with an error prompt, using the Errorplacement control to put the error message on the instance call:
Submithandler:function (from) {
How forms are submitted
From.submit ();

Serialization of Forms
Console.log ($ (form). Serialize ());
}

Ignore: "#hh" does not validate class HH

Each rules configuration method has a default depends:function (element) {condition}, which indicates that the configuration method is only started when the function satisfies the criteria <br>
The parameter param:x can be added to the method when the configuration method has parameters, and passed in when the function satisfies the condition in depends.

username:{
required:{
Depends:function (Element) {
Return $ ("#password"). Is (": filled"); Verify user name only if password is filled in
}
}
}

More reference API documentation ....

Jquery-validate Plug-in