mainly divided into several parts
Basic usage of Jquery.validate
Jquery.validate API Description
Jquery.validate Customization
Jquery.validate Common types of validation code
Download Address
Jquery.validate Plugin's document address
Http://docs.jquery.com/Plugins/Validation
Home page of the Jquery.validate plugin
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Demo available on the Jquery.validate plugin home page
http://jquery.bassistance.de/validate/demo/
validation rules are the default checksum rules, or you can customize the rules
(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
Validation Tips
The following is the default validation prompts, the official website has Simplified Chinese version of the verification prompts download, or through Jquery.extend (jQuery.validator.messages custom error message, can be the site's validation hint text unified into a file.
Copy Code code as follows:
Required: "This field is required.",
Remote: "Please fix this field.",
Email: "Please enter a valid e-mail address.",
URL: "Please enter a valid URL.",
Date: "Please enter a valid date.",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter a valid number.",
Digits: "Please enter only digits",
CreditCard: "Please enter a valid card number.",
Equalto: "Please enter the same value again.",
Accept: "Please enter a value with a valid extension."
MaxLength: $.validator.format ("Please enter no more than {0} characters."),
MinLength: $.validator.format ("Please enter at least {0} characters."),
Rangelength: $.validator.format ("Please enter a value between {0} and {1} characters long."),
Range: $.validator.format ("Please enter a value between {0} and {1}."),
Max: $.validator.format ("Please enter a value less than or equal to {0}."),
Min: $.validator.format ("Please enter a value greater than or equal to {0}.")
How to use
1:
Use default validation rules in controls, examples:
e-mail (required) <input id= "email" class= "required email" value= "email@"/>2:
You can customize validation rules in a control, for example:
Custom (required, [3,5])
<input id= "complex" value= "HI" class= "{required:true,minlength:3, Maxlength:5,
Messages:{required: ' Why not input a bit of text ', minlength: ' Too little input ', maxlength: ' Input so much do '} '/>
3: Through JavaScript Custom validation rules, the following JS custom two rules, password and Confirm_password
Copy Code code as follows:
$ (). Ready (function () {
$ ("#form2"). Validate ({
Rules: {
Password: {
Required:true,
Minlength:5
},
Confirm_password: {
Required:true,
Minlength:5,
Equalto: "#password"
}
},
Messages: {
Password: {
Required: "Did not fill in the password",
Minlength:jQuery.format ("Password cannot be less than {0} characters")
},
Confirm_password: {
Required: "No confirmation password",
MinLength: "Confirm password cannot be less than {0} characters",
Equalto: "Two times the input password is inconsistent."
}
}
});
});
In addition to being set to True/false, required can also use expressions or functions, such as
Copy Code code as follows:
$ ("#form2"). Validate ({
Rules: {
Funcvalidate: {
Required:function () {return $ ("#password"). Val ()!= "";}
}
},
Messages: {
Funcvalidate: {
Required: "Must fill in the case with password"
}
}
});
Html
Password <input id= "password" name= "password" type= "password"/>
Confirm Password <input id= "Confirm_password" name= "Confirm_password" type= "password"/>
Conditional validation <input id= "Funcvalidate" name= "funcvalidate" value= ""/>
4: Use meta custom validation information
First use JS to set meta
$ ("#form3"). Validate ({meta: "validate"});
Html
Email<input class= "{validate:{required:true, Email:true,
messages:{required: ' Input email address ', email: ' You are not entering a valid email address '}} '/>
5: Use Meta to write validation rules in a custom label, such as Validate
JS Settings meta
$ (). Ready (function () {
$.metadata.settype ("attr", "validate");
$ ("#form1"). Validate ();
});
Html
Email
<input id= "Email" name= "email"
Validate= "{required:true, Email:true, messages:{required: ' Enter email address ', email: ' You are not entering a valid email address '}} '/>
6: Custom validation rules
For complex validation, you can add custom validation rules through JQuery.validator.addMethod
The additional-methods.js contained in the official website contains some commonly used verification methods, such as Lettersonly,ziprange,nowhitespace
Example
Copy Code code as follows:
Character validation
JQuery.validator.addMethod ("UserName", function (value, Element) {
return this.optional (Element) | | /^[\u0391-\uffe5\w]+$/.test (value);
"The user name can only include Chinese characters, English letters, numbers, and underscores".
And then you can use this rule.
$ ("#form1"). Validate ({
Validation rules
Rules: {
UserName: {
Required:true,
Username:true,
Rangelength: [5,10]
}
},
/* SET error message * *
Messages: {
UserName: {
Required: "Please fill in User name",
Rangelength: "User name must be between 5-10 characters"
}
},
});
7:radio, checkbox, select are validated in a similar way
Verification of Radio
Gender
<span>
Male <input type= "Radio" id= "Gender_male" value= "M" name= "gender" class= "{required:true}"/><br
Female <input type= "Radio" id= "Gender_female" value= "F" name= "gender"/>
</span>
Verification of CheckBox
Select at least two items
<span>
Option 1<input type= "checkbox" id= "Check_1" value= "1" name= "CheckGroup"
Class= "{required:true,minlength:2, messages:{required: ' must choose ', MinLength: ' Select at least 2 '}} '/><br/>
Option 2<input type= "checkbox" id= "Check_2" value= "2" name= "CheckGroup"/><br/>
Option 3<input type= "checkbox" id= "Check_3" value= "3" name= "CheckGroup"/><br/>
</span>
Validation of Select
Drop down box
<span>
<select id= "Selectbox" name= "Selectbox" class= "{required:true}" >
<option value= "" ></option>
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
</select>
</span>
8:ajax Verification
Remote can be used for AJAX validation
Remote: {
URL: "url",//url address
Type: "POST",//mode of delivery
DataType: "JSON",//Data format: {//data to be passed
Username:function () {
Return $ ("#username"). Val ();
}}
}
Add: JQuery Validation Plugin Remote authentication method bug
Http://www.jb51.net/article/24079.htm
The next chapter is a specific description of the API
Then organize how to further customize Jquery.validate and some of the commonly used authentication codes on the Web
