JQuery Validation makes verification so easy (3)

Source: Internet
Author: User
Tags valid email address

The following code provides a simple demonstration of jQuery Validation, including required items, character length, and format verification.

1. Import files

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script><script src="js/jquery.validate.js" type="text/javascript"></script>

Ii. Declare HTML fragments


3. error message Style


Iv. Verification Code

<Script type = "text/javascript"> $ (function () {$ ("# jvForm "). validate ({rules: {username: {// The username must contain at least three required: true, minlength: 3}, and password: {// The password must contain at least six required characters: true, minlength: 6}, confirm_password: {// password confirmation required: true, failed to: "# password"}, address: {// The Place of birth is required. required: true }, mobile: {// required verification format for mobile phone: required: true, mobile: true}, email: {// required verification format: required: true, email: tr Ue },}, messages: {username: {required: "The user name cannot be blank! ", Minlength:" There are at least three usernames! "}, Password: {required:" The password cannot be blank! ", Minlength:" At least six passwords! "}, Confirm_password: {required:" The password cannot be blank! ", Failed to:" The two passwords are inconsistent! "}, Address: {required:" select the place of birth! ",}, Mobile: {required:" The mobile phone cannot be blank! ", Mobile:" Incorrect mobile phone format ",}, email: {required:" The email cannot be blank! ", Email:" Incorrect email format ", },}) ;}) </script>

Because jquery. validate. js does not have mobile verification, you need to add

First, find messages and add mobile as follows:

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 ). ", number:" Please enter a valid number. ", mobile:" enter the correct mobile phone number. ", digits:" Please enter only digits. ", creditcard:" Please enter a valid credit card number. ", failed to:" Please enter the same value again. ", 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 }. ")}

Then add the mobile Regular Expression verification in methods.

mobile: function( value, element ) {return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value);}

Running Effect

Related Article

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.