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

Source: Internet
Author: User
Tags cdata

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?
  1. Required: Required Field
  2. Remote: "Please fix this field",
  3. Email: e-mail verification
  4. URL: URL Validation
  5. Date: Day validation
  6. Dateiso: Date (ISO) validation
  7. Datede:
  8. Number: Digital Verification
  9. Numberde:
  10. Digits: Only integers can be entered
  11. CreditCard: Credit card number Verification
  12. Equalto: "Please enter the same value again" validation
  13. Accept: String validation with a valid suffix name
  14. Maxlength/minlength: Maximum/Minimum Length verification
  15. Rangelength: string length Range validation
  16. Range: Digital Range validation
  17. 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?
  1. $ ("#commentForm"). Validate ({
  2. Rules: {
  3. Username: {
  4. Required: true,
  5. Minlength:2
  6. },
  7. Email: {
  8. Required: true,
  9. Email: true
  10. },
  11. URL:"url",
  12. Comment: "required"
  13. },
  14. Messages: {
  15. Username: {
  16. Required: ' Please enter your name ',
  17. MinLength: ' Please enter at least two characters '
  18. },
  19. Email: {
  20. Required: ' Please enter e-mail ',
  21. Email: ' Please check the format of email '
  22. },
  23. URL: ' Please check the format of the URL ',
  24. Comment: ' Please enter your comment '
  25. }
  26. });

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?
  1. Errorelement: "em", //can be used with other tags, remember to change the style also corresponds to
  2. Success: function (label) { //label points to the above error message label em
  3. Label.text ("") //Empty error message
  4. . addclass ("Success"); //Plus Custom success class
  5. }
  6. Add a style to the CSS and associate it with it
  7. Em.error {
  8. Background:url ("images/unchecked.gif") no-repeat 0px 0px;
  9. padding-left:16px;
  10. }
  11. em.success {
  12. Background:url ("images/checked.gif") no-repeat 0px 0px;
  13. padding-left:16px;
  14. }

Custom validation Rules

[JavaScript]View PlainCopyprint?
    1. Customizing a validation method
    2. $.validator.addmethod (
    3. "Formula", //Verify method name
    4. function (value, element, param) {//validation rule
    5. return value = = eval (param);
    6. },
    7. ' Please enter the results of the mathematical formula calculation correctly '//Verify the prompt information
    8. );
    9. $ ("#commentForm"). Validate ({
    10. Rules: {
    11. Username: {
    12. Required: true,
    13. Minlength:2
    14. },
    15. Email: {
    16. Required: true,
    17. Email: true
    18. },
    19. URL:"url",
    20. Comment: "required",
    21. Valcode: {
    22. Formula: "7+9"
    23. }
    24. },
    25. Messages: {
    26. Username: {
    27. Required: ' Please enter your name ',
    28. MinLength: ' Please enter at least two characters '
    29. },
    30. Email: {
    31. Required: ' Please enter e-mail ',
    32. Email: ' Please check the format of email '
    33. },
    34. URL: ' Please check the format of the URL ',
    35. Comment: ' Please enter your comment ',
    36. Valcode: ' captcha error '
    37. }
    38. });

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.