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. Introduction of jquery library and validation plugin
Copy Code code as follows:
<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
Copy Code code as follows:
<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
Copy Code code as follows:
Class= "required" must be filled in
class= "required Email" must be filled in and the content conforms to the email format verification
class= "url" conforms to URL format validation
Minlength= "2" Minimum length of 2
There are 19 types of verifiable rules:
[JavaScript] View plaincopyprint?
Required: Required Fields
Remote: "Please fix this field",
Email: e-mail verification
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" validation
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 verification
Need to introduce the JS
Copy Code code as follows:
<script type= "Text/javascript" src= ". /.. /scripts/jquery-1.3.1.js "></script>
<script type= "Text/javascript" src= "Lib/jquery.validate.js" ></script>
Initialized HTML
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ ("#commentForm"). Validate ()
})
</script>
<form class= "Cmxform" id= "Commentform" method= "Get" action= "" >
<fieldset>
<legend> a simple validate validation with validation tips for a comment example </legend>
<p>
<label for= "Cusername" > Name </label>
<em>*</em><input id= "Cusername" name= "username" size= "" class= "required" minlength= "2"/>
</p>
<p>
<label for= "Cemail" > Email </label>
<em>*</em><input id= "Cemail" name= "email" size= "class=" required "email"/>
</p>
<p>
<label for= "curl" > URL </label>
<em> </em><input id= "curl" name= "url" size= "" class= "url"/>
</p>
<p>
<label for= "Ccomment" > Your comments </label>
<em>*</em><textarea id= "ccomment" name= "comment" "cols=" class= "required" ></textarea>
</p>
<p>
<input class= "Submit" type= "Submission" value= "submitted"/>
</p>
First look at the default set of specifications
| Serial Number |
rules |
Description |
| 1 |
Required:true |
The field that must be entered. |
| 2 |
Remote: "check.php" |
Use the Ajax method to invoke check.php to validate input values. |
| 3 |
Email:true |
You must enter an e-mail message in the correct format. |
| 4 |
Url:true |
You must enter a URL in the correct format. |
| 5 |
Date:true |
You must enter a date in the correct format. Date Check IE6 error, use caution. |
| 6 |
Dateiso:true |
You must enter a date in the correct format (ISO), for example: 2009-06-23, 1998/01/22. Verify the format only, not validate the validity. |
| 7 |
Number:true |
You must enter a valid number (negative, decimal). |
| 8 |
Digits:true |
You must enter an integer. |
| 9 |
CreditCard |
You must enter a valid credit card number. |
| 10 |
Equalto: "#field" |
Input values must be the same as #field. |
| 11 |
Accept |
Enter a string with the legal suffix name (the suffix of the uploaded file). |
| 12 |
Maxlength:5 |
Enter a string with a maximum length of 5 (Chinese characters are counted as one character). |
| 13 |
Minlength:10 |
Enter a string with a minimum length of 10 (Chinese characters are counted as one character). |
| 14 |
RANGELENGTH:[5,10] |
Enter a string that must be between 5 and 10 (Chinese characters are counted as one character). |
| 15 |
RANGE:[5,10] |
The input value must be between 5 and 10. |
| 16 |
Max:5 |
The input value cannot be greater than 5. |
| 17 |
Min:10 |
The input value cannot be less than 10. |
Required said must be filled in
Email indicates that the correct mailbox must be
The validation specification is written in the HTML class, the method is defective, the later maintenance increases the cost, does not realize the behavior and the structure separation
So, you might want to empty the class in HTML as follows:
Copy Code code as follows:
<form class= "Cmxform" id= "Commentform" method= "Get" action= "" >
<fieldset>
<legend> a simple validate validation with validation tips for a comment example </legend>
<p>
<label for= "Cusername" > Name </label>
<em>*</em><input id= "Cusername" name= "username" size= "
</p>
<p>
<label for= "Cemail" > Email </label>
<em>*</em><input id= "Cemail" name= "email" size= "/>"
</p>
<p>
<label for= "curl" > URL </label>
<em> </em><input id= "curl" name= "url" size= "/>"
</p>
<p>
<label for= "Ccomment" > Your comments </label>
<em>*</em><textarea id= "ccomment" name= "comment" cols= "></textarea>"
</p>
<p>
<input class= "Submit" type= "Submission" value= "submitted"/>
</p>
Js
Copy Code code as follows:
$ (document). Ready (function () {
$ ("#commentForm"). Validate ({
rules:{
username:{
Required:true,
Minlength:2
},
email:{
Required:true,
Email:true
},
URL: "url",
Comment: "Required",
Valcode: {
Formula: "7+9"
}
}
});
});
</script>
Because the default hint is in English, you can change it to write
Copy Code code as follows:
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 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 legal suffix name",
Maxlength:jQuery.format ("Please enter a string with a maximum length of {0}"),
Minlength:jQuery.format ("Please enter a string with a length of at least {0}"),
Rangelength:jQuery.format ("Please enter a string between {0} and {1}"),
Range:jQuery.format ("Please enter a value between {0} and {1}"),
Max:jQuery.format ("Please enter a value of max {0}"),
Min:jQuery.format ("Please enter a value of min {0}")
});
Suggest a new JS, put under Validate.js.
About the beautification of the hint
Copy Code code as follows:
Create a label that you can customize
Copy Code code as follows:
Success:function (label) {
Label.text (""). AddClass (' success ')
}
The parameter label here is the label to create, and here is the "em" and then the contents of your own, in addition to your own class on it
The Complete JS
Copy Code code as follows:
$ ("#commentForm"). Validate ({
rules:{
username:{
Required:true,
Minlength:2
},
email:{
Required:true,
Email:true
},
URL: "url",
Comment: "Required",
},
Errorelement: "em",
Success:function (label) {
Label.text (""). AddClass (' success ')
}
});
The corresponding CSS
Copy Code code as follows:
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;
}
. Success put under. Error ... Well, I don't. The specific situation. I can only experience the unspeakable. Well..
In the process of doing the project, sometimes to meet different needs, validate can also modify the verification of the information separately.
For example:
Copy Code code as follows:
messages:{
username:{
Required: "Master, I want to fill the full of",
MinLength: "Hey yo, not long enough"
}
}
The Complete JS
Copy Code code as follows:
$ ("#commentForm"). Validate ({
rules:{
username:{
Required:true,
Minlength:2
},
email:{
Required:true,
Email:true
},
URL: "url",
Comment: "Required",
Valcode: {
Formula: "7+9"
}
},
messages:{
username:{
Required: "Master, I want to fill the full of",
MinLength: "Hey yo, not long enough"
}
},
Errorelement: "em",
Success:function (label) {
Label.text (""). AddClass (' success ')
}
});
It's OK here.
About custom validation rules
Add a section of HTML code
Copy Code code as follows:
<p>
<label for= "Cvalcode" > Verification Code </label>
<input id= "Valcode" name= "Valcode"/>=7+9
</p>
Customize a rule
Copy Code code as follows:
$.validator.addmethod ("Formula", function (Value,element,param) {
return Value==eval (param)
"Please enter the authentication information correctly");
Formula is the name of the method that needs to be validated, such as required.
Value returns the value of the current input
Param returns the current custom validation format, such as: 7+9
To add a string by trying the eval method
The Complete JS
Copy Code code as follows:
$.validator.addmethod ("Formula", function (Value,element,param) {
return Value==eval (param)
"Please enter the authentication information correctly");
$ ("#commentForm"). Validate ({
rules:{
username:{
Required:true,
Minlength:2
},
email:{
Required:true,
Email:true
},
URL: "url",
Comment: "Required",
Valcode: {
Formula: "7+9"
}
},
messages:{
username:{
Required: "Master, I want to fill the full of",
MinLength: "Hey yo, not long enough"
}
},
Errorelement: "em",
Success:function (label) {
Label.text (""). AddClass (' success ')
}
});
Amount of ... Without learning, this is part of the foundation. will continue to study further. /~~ Goodbye (^_^)
