Form Verification Based on Bootstrap + jQuery. validate

Source: Internet
Author: User
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

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.