The most common use of JavaScript is validation of forms, and jquery, as a good JavaScript library, also provides an excellent form validation plugin----Validation. Validation is one of the oldest jquery plugins and has been validated by a wide variety of projects worldwide, and has been well received by many Web developers. As a standard library of validation methods, validation has the following features:
1. Built-in validation rules: 19 Types of built-in validation rules with required, digital, Email, URL, and credit card numbers
2. Custom validation rules: Easy to customize validation rules
3. Simple and powerful authentication information hint: Default authentication information prompt, and provide custom override the default prompt information function
4. Real-time verification: Validation can be triggered through keyup or blur events, not just when the form is submitted
Validate.js:http://plugins.jquery.com/project/validate
Metadata.js:http://plugins.jquery.com/project/metadata
How to use:
1. Introduction of jquery libraries and validation plugins
[JavaScript]View PlainCopyprint?
- <script src="scripts/jquery-1.6.4.js" type="Text/javascript" ></script>
- <script src="scripts/jquery.validate.js" type="Text/javascript" ></script>
2. Determine which form needs to be verified
[JavaScript]View PlainCopyprint?
- <script type="Text/javascript" >
- <! [cdata[
- $ (document). Ready (function () {
- $ ("#commentForm"). Validate ();
- });
- ]]>
- </script>
3. Encode the validation rules for different fields, set the corresponding properties of the fields
[JavaScript]View PlainCopyprint?
- class="required" must be filled in
- class="required email" must be filled in and the content is verified by email format
- class="url" conforms to URL format validation
- Minlength="2" Minimum length is 2
There are 19 types of verifiable rules:
[JavaScript]View PlainCopyprint?
- Required: Required Field
- Remote: "Please fix this field",
- Email: e-mail verification
- URL: URL Validation
- Date: Day validation
- Dateiso: Date (ISO) validation
- Datede:
- Number: Digital Verification
- Numberde:
- Digits: Only integers can be entered
- CreditCard: Credit card number Verification
- Equalto: "Please enter the same value again" validation
- Accept: String validation with a valid suffix name
- Maxlength/minlength: Maximum/Minimum Length verification
- Rangelength: string length Range validation
- Range: Digital Range validation
- Max/min: Maximum/Minimum value verification
Another method of validation (write all validation-related information to the class attribute for easy management)
1. Introduction of a new jquery plugin---jquery.metadata.js (jquery plugin that supports fixed format parsing)
[JavaScript]View PlainCopyprint?
- <script src="scripts/jquery.metadata.js" type="Text/javascript" ></script>
2. Change the authentication method of the call
[JavaScript]View PlainCopyprint?
- <script type="Text/javascript" >
- <! [cdata[
- $ (document). Ready (function () {
- //Will be $ ("#commentForm"). Validate (); Change into
- $ ("#commentForm"). Validate ({meta: "validate"});
- });
- ]]>
- </script>
3. Write all validation rules into the class attribute
[JavaScript]View PlainCopy print?
- class="{validate:{required:true, Minlength:2, messages:{required: ' Please enter a name ', minlength: ' Please enter at least two characters ' }}}"
- class="{validate:{required:true, Email:true, messages:{required: ' Please enter e-mail ', email: ' Please check the format of e-Mail '}}}"
You can also use the Name property to correlate fields and validate the validation rules (validation behavior and HTML structure are completely decoupled)
[JavaScript]View PlainCopyprint?
- $ ("#commentForm"). Validate ({
- Rules: {
- Username: {
- Required: true,
- Minlength:2
- },
- Email: {
- Required: true,
- Email: true
- },
- URL:"url",
- Comment: "required"
- },
- Messages: {
- Username: {
- Required: ' Please enter your name ',
- MinLength: ' Please enter at least two characters '
- },
- Email: {
- Required: ' Please enter e-mail ',
- Email: ' Please check the format of email '
- },
- URL: ' Please check the format of the URL ',
- Comment: ' Please enter your comment '
- }
- });
Internationalization
Validation plug-in authentication information The default language is English, if you want to change to Chinese, only need to introduce the Chinese authentication information provided by validation, the introduction of code as follows:
[JavaScript]View PlainCopyprint?
- <script src="scripts/jquery.validate.messages_cn.js" type="Text/javascript" ></script>
Customize validation information and beautify
[JavaScript]View PlainCopyprint?
- Errorelement: "em", //can be used with other tags, remember to change the style also corresponds to
- Success: function (label) { //label points to the above error message label em
- Label.text ("") //Empty error message
- . addclass ("Success"); //Plus Custom success class
- }
- Add a style to the CSS and associate it with it
- Em.error {
- Background:url ("images/unchecked.gif") no-repeat 0px 0px;
- padding-left:16px;
- }
- em.success {
- Background:url ("images/checked.gif") no-repeat 0px 0px;
- padding-left:16px;
- }
Custom validation Rules
[JavaScript]View PlainCopyprint?
- Customizing a validation method
- $.validator.addmethod (
- "Formula", //Verify method name
- function (value, element, param) {//validation rule
- return value = = eval (param);
- },
- ' Please enter the results of the mathematical formula calculation correctly '//Verify the prompt information
- );
- $ ("#commentForm"). Validate ({
- Rules: {
- Username: {
- Required: true,
- Minlength:2
- },
- Email: {
- Required: true,
- Email: true
- },
- URL:"url",
- Comment: "required",
- Valcode: {
- Formula: "7+9"
- }
- },
- Messages: {
- Username: {
- Required: ' Please enter your name ',
- MinLength: ' Please enter at least two characters '
- },
- Email: {
- Required: ' Please enter e-mail ',
- Email: ' Please check the format of email '
- },
- URL: ' Please check the format of the URL ',
- Comment: ' Please enter your comment ',
- Valcode: ' captcha error '
- }
- });
jquery Plugin--form validation plugin Jquery.validate.js