A detailed explanation of how to use jQuery Validation plugin _jquery

First, use before the necessary
Official website:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API: http://jquery.bassistance.de/api-browser/plugins.html
Current version: 1.5.5
jquery version required: 1.2.6+, compatible 1.3.2
<script src= ". /js/jquery.js "type=" Text/javascript "></script>
<script src= ". /js/jquery.validate.js "type=" Text/javascript "></script>
Second, the default checksum rule

• (1) Required:true must be lost field
• (2) Remote: "check.php" use Ajax method to invoke check.php validate input value
• (3) Email:true must enter the correct format email
• (4) Url:true must enter the URL in the correct format
• (5) Date:true must enter a date in the correct format
• (6) Dateiso:true must enter the correct format of the date (ISO), for example: 2009-06-23, 1998/01/22 only verify the format, do not verify the validity
• (7) Number:true must enter a valid number (negative, decimal)
• (8) Digits:true must enter an integer
• (9) CreditCard: Must enter the legal credit card number
• (a) Equalto: "#field" input value must be the same as #field
• (one) Accept: Enter a string with a valid suffix name (the suffix of the uploaded file)
• (Maxlength:5) A string with a maximum of 5 input length (Chinese characters are counted as one character)
• (Minlength:10) A string with a minimum input length of 10 (Chinese characters are counted as one character)
• (rangelength:[5,10] Enter a string that must be between 5 and 10) (Chinese characters are counted as one character)
• () range:[5,10] The input value must be between 5 and 10
• () Max:5 input value cannot be greater than 5
• (min:10) input value cannot be less than 10
  

Third, the default hint

Messages: {required: ' This field is required. ', Remote: ' Please fix this field. ', email: "Please enter a valid EMA Il address. ', url: ' Please enter a valid URL. ', Date: ' Please enter a valid date. ', Dateiso: "Please enter a valid D Ate (ISO). ", Datede:" Bitte geben Sie ein G eyebrow ltiges Datum. ", Number:" Please enter a ein number. ", Valid:" B Itte geben Sie eine Nummer ein. ", Digits:" Please enter only digits ", CreditCard:" To enter a valid credit card Nu Mber. ", Equalto:" Please enter the same value again. ", Accept:" To enter a value with a valid extension. ", Maxle Ngth: $.validator.format ("Please enter no further than {0} characters."), MinLength: $.validator.format ("Please enter at Le AST {0} characters. "), Rangelength: $.validator.format (" Please enter a value between {0} and {1} characters long. "), R Ange: $.validator.format ("Please enter a value between {0} and {1}."), Max: $.validator.format ("Please enter a value les s than or equal to {0}. "Min: $.validator.format ("Please enter a value greater than or equal to {0}.") 
 },

If you need to modify, you can add in the JS code:

Jquery.extend (jQuery.validator.messages, { 
  required: "Required fields", 
remote: "Please fix this field", 
email: "Please enter the correct format email", 
URL: "Please enter a valid URL", date 
: "Please enter a valid date", 
dateiso: "Please enter a valid date (ISO).", 
Number: "Please enter the legal numbers", 
digits: " Only integers can be entered, 
creditcard: "Please enter a valid credit card number", Equalto: "Please enter the 
same value again", 
Accept: "Please enter a string with a valid suffix name", 
maxlength: JQuery.validator.format ("Please enter a string with a maximum length of {0}"), 
Minlength:jQuery.validator.format ("Please enter a string with a length of at least {0}"), 
Rangelength:jQuery.validator.format ("Please enter a string between {0} and {1}"), 
Range:jQuery.validator.format (" Please enter a value between {0} and {1} ", 
Max:jQuery.validator.format (" Enter a value of max {0} "), 
Min:jQuery.validator.format (" Please enter a value of min {0} 
}); 

Recommended Practice, put this file into Messages_cn.js, and introduce it into the page
[Codept src=]. /js/messages_cn.js "type=" Text/javascript "></script> [/code
Iv. mode of Use
1. Officers transferred Guevara rules are written to the control

<script src= ". /js/jquery.js "type=" Text/javascript "></script> <script src=". /js/jquery.validate.js "type=" Text/javascript "></script> <script src="./js/jquery.metadata.js "Type=" 
Text/javascript "></script> $ (). Ready (function () {$ (" #signupForm "). Validate (); 
 
}); 
  <form id= "Signupform" method= "Get" action= "" > <p> <label for= "FirstName" >Firstname</label> <input id= "FirstName" name= "FirstName" class= "required"/> </p> <p> <label for= "email" >e-mail </label> <input id= "email" name= "email" class= "required email"/> </p> <p> <label for= "Pass Word ">Password</label> <input id=" Password "name=" Password "type=" Password "class=" {required:true, Minlength:5} "/> </p> <p> <label for=" Confirm_password "> Confirm password </label> <input id=" confirm _password "Name=" Confirm_password "type=" password "class=" {required:true,minlength:5,equalto: ' #Password '} '/> </p> <p> <input class= "Submit" type= "submit" value= "Submit"/> </p> < 
 /form>

The package must be introduced in the way class= ' {} ' is used: jquery.metadata.js
You can modify the hint by using the following methods:

Copy Code code as follows:

Class= ' {required:true,minlength:5,messages:{required: ' Please enter the content '}} '

When using the Equalto keyword, the following text must be enclosed in quotation marks, as follows:

Copy Code code as follows:

Class= "{required:true,minlength:5,equalto: ' #password '}"

Another way to use keywords: meta (for meta data use other plug-ins you want to wrap your validation rules in their own projects can use this particular option)
There is another way:

This can be done using validate= "{required:true}", or class= "required", but class= "{required:true,minlength:5}" will not work   &NBSP
2 officers transferred Guevara rules written to code    

$ (). Ready (function () {$ ("#signupForm"). Validate ({rules: {firstname: "required", email: {required:true, E Mail:true}, Password: {required:true, minlength:5}, Confirm_password: {required:true, Minlength:5 , Equalto: "#password"}}, messages: {firstname: "Please enter your name", email: {Required: "Please enter your email address", Email: "Please enter the correct 
 Email address "}, Password: {required:" Please enter password ", Minlength:jQuery.format (" Password cannot be less than {0} characters ")}, Confirm_password: { 
Required: "Please enter confirmation password", minlength: "Confirm password cannot be less than 5 characters", Equalto: "Two times input password inconsistent inconsistent"}}); 
}); Messages, if a control does not have a message, the default information is invoked <form id= "Signupform" method= "Get" action= "> <p> <label for=" FirstName ">Firstname</label> <input id=" FirstName "name=" FirstName "/> </p> <p> <labe L for= "email" >E-Mail</label> <input id= "email" name= "email"/> </p> <p> <label for= "Pass Word ">Password</label> <input id=" PassWord "name=" password "type=" password "/> </p> <p> <label for=" Confirm_password "> Confirm password </label& 
Gt <input id= "Confirm_password" name= "Confirm_password" type= "password"/> </p> <p> <input class= "  Submit "type=" submit "value=" Submit "/> </p> </form>

Required:true must have a value
Required: The value of the "#aa: Checked" expression is true, you need to verify
Required:function () {} returns True, the table requires validation
Two of the elements that are commonly used in the form that need to be filled in or not filled in at the same time

V. Example EXPLANATION

Example One: Streamline validation by calling the Validate () method of the Form object to validate that the validation rule is defined by the HTML Tag property: The following defines the distance for a common attribute

Class= ' required '//must field
class= ' mail '//Mailbox verification
class= ' url '//url URL verification
class= ' Date '//correct date format to meet 2012,0204,2012-02-04
class= ' number '//Enter legal numbers
class= ' digits '//input integer
Minlength= '//min input length
Maxlength= '//maximum input length (this value does not prompt, the number of characters can not be increased)
max= '//input number is less than the specified value
min= '//input number is greater than the specified value

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Example two: method validation, validating a form by customizing form rules

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The above is the entire content of this article, I hope to help you learn.