JQuery plug-in integrated application (1) Registration

Registration and login are functions that every website of a slightly larger scale should have. The login function is similar to the registration function and easier than the registration function. Therefore, this article describes the jQuery plug-in application with registration.

JQuery plug-ins are easy to use. If you only use them as demonstrated in the jQuery plug-in demo, you will be able to get started quickly. However, some skills are required to perform operations as needed. The following is a description of nanoscroller.

When it comes to the registration function, it is nothing more than verifying the user's registration information to verify whether the registration information entered by the user is legal. In the jQuery plug-in, the validation plug-in can implement the verification function. If the user's information is valid, the user only needs to agree to the "website agreement" and then allows the next operation-registration. The "website protocol" is displayed in multiple ways, either on the current page or on the pop-up layer. This article describes how to display "protocol information" in the pop-up layer. The Lightbox_me plug-in can implement the pop-up layer function. There may be a lot of "protocol information" on the website. To improve the user experience, we may need to use a scroll bar to display part of "protocol information. The nanoscroller plug-in can implement the scroll bar function.

2. Plug-ins used

This article describes the comprehensive application of the validation plug-in, Lightbox_me plug-in, and nanoscroller plug-in. The usage of these three plug-ins is not described here. If you do not understand the use of these three plug-ins, you can go to the plug-ins official to learn how to use them. Or read the following three articles.
Summary of common jQuery plug-ins for website development (4) validation plug-in validation
Summary of commonly used jQuery plug-ins in website development (2) plug-ins at the pop-up layer Lightbox_me
Summary of jQuery plug-ins commonly used in website development (5) scroll bar plug-in nanoscroller

To implement registration, the plug-in must implement the following functions:

Functions implemented by the validation plug-in
1. Verify that email is valid
2. Is the user name legal?
3. Length of information
4. Do you agree to the "Agreement information" on this site"

Functions implemented by the Lightbox_me plug-in
1. Hide and show the "protocol information" in the pop-up layer"

Functions implemented by the nanoscroller plug-in
1. Scroll to display "protocol information"

IV. Implementation Process

1. First define the page style, such as the "register" style and Center page display. There are a lot of code, so I won't post it here. You can see on the test page below
2. The style of each plug-in. The plugin must be able to customize styles. To define the "error message" style, pop-up layer style, and scroll bar style.

{:;:;:;:;:;}{:;}{:;:;:;:;:;}{:;:;:;:;}{:;:;:;:;:;}{:;:;}{:;    }

3. js encoding. Three plug-ins are involved, which is also the main part of this article. Here is a general introduction. You can view the code on the test page.
The plug-in at the pop-up layer is easy to use. We only need to set a connection. When the connection is clicked, initialize the scroll bar plug-in and display the pop-up layer.

$('#agreement').click("#agreementbox""#agreementbox").nanoScroller({alwaysVisible: ,disableResize: ,alwaysVisible: '#agreementbox'  $('#cancel').click('#agreementbox').trigger('close'

The operation on the pop-up layer is very simple, and the initialization of the scroll bar plug-in is also very simple. However, when the two plug-ins are combined, a problem occurs.

The pop-up layer and scroll information are normal. The next step is to verify the information. The validation plug-in has already been described in previous articles, so I will not repeat the previous instructions here (you can refer to this article to summarize the jQuery plug-ins commonly used in website development (4) Verify the validation plug-in ), this article only mentions the custom verification method. Here we will try to explain the custom methods.
When verifying information, we need to verify the username format, for example, only letters and numbers are allowed. You can customize the method, and then use a regular expression for verification in the method. The following code is used:

"Regex" re =. optional (element) | "incorrect input format" 6/^ [a-zA-Z0-9] {6, 20} $/"username cannot be blank" "username consists of at least {0} characters" "username can have only numbers letter composition"

V. Test Description

Test Environment win7 + ie8.chrome25.0.1364.97 m, firefox12.0. The rounded corner box cannot be displayed under Windows 7 + ie8.
Test diagram in chrome:

Test address: http://www.1100w.com/wp-content/uploads/2013/10/reg.html