Quick Learning jquery Plugin jquery.validate.js form verification plug-in usage _jquery

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

How to use:
1. Introduction of jquery library and validation plugin

<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

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

3. For different fields, to code the validation rules, set the corresponding properties of the field

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"   

There are 19 types of verifiable rules:
Required:Required Fields
Remote:"Please fix this field",
Email:E-mail authentication
URLs: URL Verification
Date: Validation of dates
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:Digital Range Validation
max/min:Max/min validation
Another validation method (write all validation-related information to the class attribute for ease of administration)
1). Introduction of a new jquery plugin---jquery.metadata.js (jquery plug-ins that support fixed format resolution)

Copy Code code as follows:

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

2). Change the authentication method of the call

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

3). Write all validation rules into the class attribute

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)

$ ("#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 only need to introduce validation to provide the Chinese authentication information, the introduction of the code is as follows:

Copy Code code as follows:

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

Customizing validation information and beautifying

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 a 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

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: ' Authenticode error ' 
  } 

The above is about the form verification plug-in jquery.validate.js detailed introduction, I hope to help you learn.