Form Verification Based on Bootstrap + jQuery. validate

This article mainly introduces you in detail based on Bootstrap + jQuery. validate is used to implement form verification. If you are interested, you can refer to this practice. The services that you first came into contact with at the front-end are user registration and login. Now the society adheres to the people-oriented philosophy, as is the case in the website development process. User is a large number of objects and a core object. The initial user registration and login are especially important.

User Registration and login are often more difficult than we think. For example, in Form Verification, there are actually a lot of content covered in it. For the front-end, you need to understand:

1. Basic understanding of Regular Expressions

In fact, regular expressions are not difficult, and it can bring you a great sense of accomplishment after the conference, enjoy that effect with half the effort.

2. ajax asynchronous request

A prompt is displayed when verifying whether the user name exists or the account or password is incorrect during user logon.

3. Some convenient verification libraries, such as jQuery. validate

Thanks to such common requirements and complexity, some excellent class libraries such as bootstrap form and jQuery. validate Form validation are designed to solve the UI and Form validation problems.

The following is the interface I made with bootstrap + jQuery. validate:

To all text elements,AndAdd class. form-control.The effect is as follows:Step 3: add class. control-label to the label.The effect is as follows:Ii. jQuery. validate custom Verification Method1. Custom Verification Method// Verify the jQuery mobile phone number. validator. addMethod ("isPhone", function (value, element) {var length = value. length; return this. optional (element) | (length = 11 &/^ (13 [0-9] {1}) | (15 [0-9] {1 }) | (18 [0-9] {1}) + \ d {8}) $ /. test (value) ;}, "Enter your mobile phone number correctly. "); 2. Call custom VerificationRules: {phone: {required: true, isPhone: true }} 3. custom error display3. register.htmlRegister