JQuery Validation makes verification so easy (3)

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