jquery Plug-in--form verification plug-in Jquery.validate.js__js

It programmer development must-all kinds of resources download list, the most complete IT resources in history, personal collection summary.

The most common use of JavaScript is the validation of forms, and jquery, as a good JavaScript library, also provides an excellent form validation plug-in----Validation. Validation is one of the oldest jquery Plug-ins and has been validated by a wide variety of projects worldwide, and has been praised by many web developers. As a standard validation method library, validation has the following features:

1. Built-in validation rules: have mandatory fill, number, Email, URL and credit card number of the 19 types of built-in validation rules

2. Custom validation rules: You can easily customize validation rules

3. Simple and powerful authentication information hint: Default validation information prompt, and provide custom override default hint information function

4. Real-time validation: May trigger validation via KeyUp or Blur events, not just when the form is submitted

Validate.js Download Address: http://plugins.jquery.com/project/validate

Metadata.js Download Address: http://plugins.jquery.com/project/metadata

How to use:
1. Introduce the jquery library and validation plugin [JavaScript] view plain copy print? <script src= "Scripts/jquery-1.6.4.js" type= "Text/javascript" ></script> <script src= "scripts/" Jquery.validate.js "type=" Text/javascript "></script>

<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 validated [JavaScript] view plain copy print? <script type= "Text/javascript" >////<! [cdata[$ (document). Ready (function () {$ ("#commentForm"). Validate (),});//]]> </script>

<script type= "Text/javascript" >
////<![ cdata[
$ (document). Ready (function () {
    $ ("#commentForm"). Validate ();
]]>
</script>

3. For different fields, to code the validation rules, set the corresponding properties of the field
[JavaScript]View Plain copy print? Class= "required" must fill in the class= "required email" must fill in and the content conforms to the email format verification class= "url" conforms to the URL format verification minlength= "2" Minimum length is 2

Class= "Required"   must fill in the
class= "required Email"        must fill in and the content conforms to the email format verification
class= "url" conforms to the             URL format verification
Minlength= "2"      Minimum length of 2

There are 19 of verifiable rules: [JavaScript] view plain copy print? Required: Required fields remote: "Please fix this field", Email: email authentication url: URL Verification date: Dates validation dateiso: Date (ISO) validation datede:number: Digital Validation Numberde:dig Its: can only enter integer creditcard: credit card number verification Equalto: "Please enter the same value again" verify accept: String validation with legal suffix maxlength/minlength: max/min Length validation rangelength: Word String length range Validation range: Digital range validation max/min: Max/min validation

        Required:      Required fields
        Remote:        "Please fix this field",
        email:         Email authentication
        URL: url           validation date
        :          Date 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" to verify
        Accept:        string validation with a valid suffix name
        maxlength/ MinLength:    max/min length verification
        rangelength:     string length range validation
        range:           number range validation
        max/min:         Max/ Min-Value Validation

Another validation method (write all validation-related information to the class attribute for ease of administration)

1. Introduce a new jquery plug-in---jquery.metadata.js (jquery plug-ins that support fixed format resolution) [JavaScript] view plain copy print? <script src= "Scripts/jquery.metadata.js" type= "Text/javascript" ></script>

<script src= "Scripts/jquery.metadata.js" type= "Text/javascript" ></script>

2. Change the authentication method of the call [JavaScript]View Plain copy print? <script type= "Text/javascript" >////<! [cdata[$ (document). Ready (function () {//$ ("#commentForm"). Validate () to $ ("#commentForm"). Validate ({meta: " Validate "}); }); ]]> </script>

<script type= "Text/javascript" >
////<![ cdata[
$ (document). Ready (function () {
    //$ ("#commentForm"). Validate ();  Change to
    $ ("#commentForm"). Validate ({meta: "validate"});
]]>
</script>

3. Write all validation rules into the class attribute
[JavaScript]View Plain copy print? Class= "{validate:{required:true, Minlength:2, messages:{required: ' Please enter name ', minlength: ' Please enter at least two characters '}}} ' class= ' { Validate:{required:true, Email:true, messages:{required: ' Please enter email ', Email: ' Please check the format of email '}} '

Class= "{validate:{required:true, Minlength:2, messages:{required: ' Please enter name ', minlength: ' Please enter at least two characters '}}} '
class= ' { Validate:{required:true, Email:true, messages:{required: ' Please enter email ', Email: ' Please check the format of email '}} '     

You can also associate the validation of a field with a validation rule by using the Name property (validation behavior is completely decoupled from the HTML structure)
[JavaScript]View Plain copy print? $ ("#commentForm"). Validate ({rules: {username: {required:true, minlength:2}, email: {required:true, email:true}, URL: "url", Comment: "Required"}, messages: {username: {required: ' Please enter name, minlength: ' Please enter at least two characters '}, email: {Required: ' Please enter email ', Email: ' Please check the format of e-mail '}, url: ' Please check the format of the URL ', Comment: ' Please enter your comment '}};

$ ("#commentForm"). Validate ({
   rules: {
      username: {
         required:true,
         minlength:2
      },
      email: {
         Required:true,
         email:true
      },
      url: "url",
      Comment: "Required"
   },
   messages: {
      Username: {
         required: ' Please enter name ',
         minlength: ' Please input at least two characters '
      },
      email: {
         required: ' Please input email ',
         Email: ' Please check the format of e-mail '
      },
      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, you just need to introduce validation provided in Chinese authentication information, the introduction of the code is as follows: [JavaScript] view plain copy print? <script src= "Scripts/jquery.validate.messages_cn.js" type= "Text/javascript" ></script>

<script src= "Scripts/jquery.validate.messages_cn.js" type= "Text/javascript" ></script>

Customizing validation information and beautifying [JavaScript]View Plain copy print? Errorelement: "em",//can be used with other tags, remember to change the style also corresponding to modify success:function (label) {//label point to the above error message label em Label.text ("")//Empty error prompt messages. AddClass ("Success"); Add the custom success class} to the CSS with the style associated 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;}

Errorelement: "em",               //can be used with other tags, remember to put the style also corresponding to modify
success:function (label) {    //label point to the above error message label EM
      Label.text ("")                       //Empty error message
              . addclass ("Success");    Plus the custom success class
     }
Add a style to the CSS
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 Plain copy print? Customizes a validation method $.validator.addmethod ("formula",//Validation method name function (value, element, param) {//validation rule return value = = eval (param ); }, ' please input the result of the math 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 name ', minlength: ' Please lose at least into two characters '}, email: {Required: ' Please enter email ', Email: ' Please check the format of email '}, url: ' Please check the format of URL ', Comment: ' Please enter your comment ', valcode: ' Verify code Error '}};

Customize a validation method
$.validator.addmethod (
    "formula",//validation method name
    function (value, element, param) {//validation rules
        return value = = eval (param);
    }, 
    ' Please enter the result of the math formula calculation correctly '///Verify the hint 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 name ',
         minlength: ' Please enter at least two characters '
      },
      email: {
         required: ' Please enter email ', email
         : ' Please check the format of email '
      },
      URL: ' Please check the format of the URL ',
      Comment: ' Please enter your comment ',
      valcode: ' Captcha error '
   }
};