jquery Plugin--form validation plugin Jquery.validate.js

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?

1. <script src="scripts/jquery-1.6.4.js" type="Text/javascript" ></script>
2. <script src="scripts/jquery.validate.js" type="Text/javascript" ></script>

2. Determine which form needs to be verified

[JavaScript]View PlainCopyprint?

1. <script type="Text/javascript" >
2. <! [cdata[
3. $ (document). Ready (function () {
4. $ ("#commentForm"). Validate ();
5. });
6. ]]>
7. </script>

3. Encode the validation rules for different fields, set the corresponding properties of the fields

[JavaScript]View PlainCopyprint?

1. class="required" must be filled in
2. class="required email" must be filled in and the content is verified by email format
3. class="url" conforms to URL format validation
4. Minlength="2" Minimum length is 2

There are 19 types of verifiable rules:

[JavaScript]View PlainCopyprint?

2. Required: Required Field
4. Remote: "Please fix this field",
6. Email: e-mail verification
8. URL: URL Validation
10. Date: Day validation
12. Dateiso: Date (ISO) validation
14. Datede:
16. Number: Digital Verification
18. Numberde:
20. Digits: Only integers can be entered
22. CreditCard: Credit card number Verification
24. Equalto: "Please enter the same value again" validation
26. Accept: String validation with a valid suffix name
28. Maxlength/minlength: Maximum/Minimum Length verification
30. Rangelength: string length Range validation
32. Range: Digital Range validation
34. 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?

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

2. Change the authentication method of the call

[JavaScript]View PlainCopyprint?

1. <script type="Text/javascript" >
2. <! [cdata[
3. $ (document). Ready (function () {
4. //Will be $ ("#commentForm"). Validate (); Change into
5. $ ("#commentForm"). Validate ({meta: "validate"});
6. });
7. ]]>
8. </script>

3. Write all validation rules into the class attribute

[JavaScript]View PlainCopy print?

1. class="{validate:{required:true, Minlength:2, messages:{required: ' Please enter a name ', minlength: ' Please enter at least two characters ' }}}"
2. 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?

2. $ ("#commentForm"). Validate ({
4. Rules: {
6. Username: {
8. Required: true,
10. Minlength:2
12. },
14. Email: {
16. Required: true,
18. Email: true
20. },
22. URL:"url",
24. Comment: "required"
26. },
28. Messages: {
30. Username: {
32. Required: ' Please enter your name ',
34. MinLength: ' Please enter at least two characters '
36. },
38. Email: {
40. Required: ' Please enter e-mail ',
42. Email: ' Please check the format of email '
44. },
46. URL: ' Please check the format of the URL ',
48. Comment: ' Please enter your comment '
50. }
52. });

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?

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

Customize validation information and beautify

[JavaScript]View PlainCopyprint?

2. Errorelement: "em", //can be used with other tags, remember to change the style also corresponds to
4. Success: function (label) { //label points to the above error message label em
6. Label.text ("") //Empty error message
8. . addclass ("Success"); //Plus Custom success class
10. }
12. Add a style to the CSS and associate it with it
14. Em.error {
16. Background:url ("images/unchecked.gif") no-repeat 0px 0px;
18. padding-left:16px;
20. }
22. em.success {
24. Background:url ("images/checked.gif") no-repeat 0px 0px;
26. padding-left:16px;
28. }

Custom validation Rules

[JavaScript]View PlainCopyprint?

2. Customizing a validation method
4. $.validator.addmethod (
6. "Formula", //Verify method name
8. function (value, element, param) {//validation rule
10. return value = = eval (param);
12. },
14. ' Please enter the results of the mathematical formula calculation correctly '//Verify the prompt information
16. );
20. $ ("#commentForm"). Validate ({
22. Rules: {
24. Username: {
26. Required: true,
28. Minlength:2
30. },
32. Email: {
34. Required: true,
36. Email: true
38. },
40. URL:"url",
42. Comment: "required",
44. Valcode: {
46. Formula: "7+9"
48. }
50. },
52. Messages: {
54. Username: {
56. Required: ' Please enter your name ',
58. MinLength: ' Please enter at least two characters '
60. },
62. Email: {
64. Required: ' Please enter e-mail ',
66. Email: ' Please check the format of email '
68. },
70. URL: ' Please check the format of the URL ',
72. Comment: ' Please enter your comment ',
74. Valcode: ' captcha error '
76. }
78. });

jquery Plugin--form validation plugin Jquery.validate.js