JQuery Validate Form Verification plug-in-use jquery. metadata. js to write validation rules directly in the class attribute and define the error message, validatemetadata

Source: Internet
Author: User
Tags valid email address

JQuery Validate Form Verification plug-in-use jquery. metadata. js to write validation rules directly in the class attribute and define the error message, validatemetadata

1. Download dependency packages

 

Network Disk download: https://yunpan.cn/cryvgGGAQ3DSW access password f224

 

2. Add another plug-in jquery. metadata. js and write the validation rules in the control.

 

3. You need to rewrite the method used to trigger verification.

 

 $("#commentForm").validate({meta: "validate"});

 

4. Detailed code is as follows:

 

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html> 

 

Default verification rules:

 

(1) required: true mandatory field (2) remote: "check. php "uses ajax to call check. php verification input value (3) email: true must enter the correct format of the email (4) url: true must enter the correct format of the url (5) date: true: An error occurred while verifying ie6 by entering a date in the correct format. Exercise caution when using (6) dateISO: true: a date in the correct format (ISO) is required. For example: 2009-06-23,1998/01/22 only verify the format, Not Verify validity (7) number: true must enter a valid number (negative, decimal) (8) digits: true must be an integer (9) creditcard: a valid credit card number (10) must be entered to: "# field". The input value must be the same as # field (11) accept: enter a string with a valid suffix (the suffix of the uploaded file) (12) maxlength: 5 string with a maximum length of 5 (one character for Chinese characters) (13) minlength: 10 string with a minimum input length of 10 (a Chinese character is counted as one character) (14) rangelength: [5, 10] The input length must be a string between 5 and 10 ") (a Chinese character is 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.

 

Default prompt:

 

Messages: {required: "This field is required. ", remote:" Please fix this field. ", email:" Please enter a valid email address. ", url:" Please enter a valid URL. ", date:" Please enter a valid date. ", dateISO:" Please enter a valid date (ISO ). ", dateDE:" Bitte geben Sie ein g eyebrow ltiges Datum ein. ", number:" Please enter a valid number. ", numberDE:" Bitte geben Sie eine Nummer ein. ", digits:" Please enter only digits ", creditcard:" Please enter a valid credit card number. ", failed to:" Please enter the same value again. ", accept:" Please enter a value with a valid extension. ", maxlength: $. validator. format ("Please enter no more than {0} characters. "), minlength: $. validator. format ("Please enter at least {0} characters. "), rangelength: $. validator. format ("Please enter a value between {0} and {1} characters long. "), range: $. validator. format ("Please enter a value between {0} and {1 }. "), max: $. validator. format ("Please enter a value less than or equal to {0 }. "), min: $. validator. format ("Please enter a value greater than or equal to {0 }. ")},

 

 

V. below:

 

Vi. Note:

 

To use class = "{}", you must introduce the package: jquery. metadata. js.

 

You can use the following method to modify the prompt content:

Class = "{required: true, minlength: 5, messages: {required: 'Enter the content '}}"

 

When using the sort to keyword, the following content must be enclosed in quotation marks. The Code is as follows:

Class = "{required: true, minlength: 5, failed to: '# password '}"

 

7. Define the error message directly in the class attribute.

 

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html> 

 

8. The effect is as follows:

 

 

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.