Use Jquery to create logon pages with the best user experience

The following operations are performed on the client by default and js support is enabled. For noscript, write your own code.

First, paste the display image:

Default status:

Error status:

Waiting status:

Workflow:

Before submitting a user's Logon Request, the client verification input box only determines the null value and length, after being submitted to the server, the system automatically verifies the validity and length of the submitted strings, removes invalid characters, returns valid strings, and performs logon Verification Based on the returned valid strings, then return the json data to the foreground for processing. The mark of successful login is login success logs loginSuccess = 0. After the server returns the data, all work is handed over to the foreground for processing.

This section focuses on the frontend processing process.

First, after the page is opened, let the page get the focus:

Too many mouse clicks then $ ('body'). focus (); so that the mouse focus will not appear in the input box.

Then, process the events of getting and losing the focus of the two input boxes:
Copy codeThe Code is as follows:
$ ('. Reg-action. reg-input'). each (function (){
Var items = $ (this). parent ('. reg-item ');
If ($ (this). val ()){
Items. addClass ("focus ");
}
$ (This). bind ('focus blur', function (event ){
Var type = event. type; // obtain the event type
If (type = 'focal '){
If (items. hasClass ('error ')){
$ (This). val ("");
Items. removeClass ('error ');
}
Items. addClass ('focal ');
} Else if (! $ (This). val ()){
Items. removeClass ('focal ');
}
})
});

After the submit button:
Copy codeThe Code is as follows:
$ (". Btn-submit"). click (function (){
Var wrongTypeName = 0, // The Error Type of the user name, which can be directly used as the subscript of the error message Array
WrongTypePwd = 0, // Error Type of the User Password
Uname = $ ("# uname"). val (), // User Name
Pwd = $ ("# passwd"). val (), // User Password
Plength = pwd. length,
Nlength = uname. length, // length
WrongNameHtml = new Array ("", "Enter the user name", "the user name length is too short", "the user name length exceeds 12 characters", "your user name or password is incorrect ", "timeout, please log on again "),
WrongPwdHtml = new Array ("", "enter the password", "the password length is less than 6 characters", "the password length is more than 20 characters", "the password contains invalid characters ");
// An array of error messages is defined here.

If (nlength = 0 ){
WrongTypeName = 1;
}
If (nlength> 0 & nlength <2 ){
WrongTypeName = 2;
}
If (nlength> 20 ){
WrongTypeName = 3;
}
If (plength = 0 ){
WrongTypePwd = 1; // here is a judgment on the length of the user name and password, and obtains the subscript of the error information array.
} Else {
Var patrn =/^ (\ w) {6, 20} $ /;
If (plength <6)
WrongTypePwd = 2;
If (plength> 20)
WrongTypePwd = 3;
If (plength> 6 & plength <20 ){
If (! Patrn.exe c (pwd ))
WrongTypePwd = 4; // This is the front-end judgment on the validity of the user's password and returns the subscript of the error array.
}
}

Var inputTip = function (index, tipHtml, tipNum ){
$ (". Reg-tip" 2.16.eq(index.html .html (tipHtml [tipNum]);
If (tipNum> 0)
$ (". Reg-item"). eq (index). addClass ("error ");
Else
$ (". Reg-item"). eq (index). removeClass ("error ");
} // Define the function displayed on the error message page. Because there are only two input boxes on the page, I directly specify the index here. If there are many, you can use $ (this). index ()

InputTip (0, wrongNameHtml, wrongTypeName );
InputTip (1, wrongPwdHtml, wrongTypePwd );

If (wrongTypePwd = 0 & wrongTypeName = 0) {// when the user input information is completely legal, that is, the array subscript is all 0 and ajax verification is started.
// $ (". Reg-input"). attr ('Disabled ', true );
$ ("# Login-form input"). attr ('Disabled ', true );
$ ('. Remember'). unbind ('click ');
$ (". Btn-master"). addClass ("visibility ");
// You have already submitted information to the server. Therefore, you can set all input box buttons on the page to unavailable, which effectively prevents repeated submission.
Var $ params = "username =" + uname + "& password =" + pwd + "& remember =" + $ ('# remember-long'). val ();
// Alert ($ params );
$. Ajax ({
Url: "CheckUserLogin. aspx ",
Data: $ params,
DataType: "json ",
Success: function (data ){
$ (Data). each (function (te, u ){
WrongTypeName = u. wrongTypeName;
WrongTypePwd = u. wrongTypePwd;
Var loginSuccess = u. loginSuccess; // obtain the json data returned by the server
// Alert (wrongTypeName );
// Alert (wrongTypePwd );
If (loginSuccess = 0 ){
Location. href = "/Members/Memb.html"; // jump directly if the call succeeds.
} Else {// Logon Failed. A friendly prompt is returned.
$ (". Btn-master"). removeClass ("visibility ");
$ ("# Login-form input"). attr ('Disabled ', false );
InputTip (0, wrongNameHtml, wrongTypeName );
InputTip (1, wrongPwdHtml, wrongTypePwd );
}
});
},
Error: function () {// return timeout and retry if the ajax request is incorrect.
WrongTypeName = 5;
InputTip (0, wrongNameHtml, wrongTypeName );
$ ("# Login-form input"). attr ('Disabled ', false );
$ ('. Remember'). bind ('click', function () {checkClick ();});
$ (". Btn-master"). removeClass ("visibility ");
}
});

}
});

Remember the password checkbox and click the text:
Copy codeThe Code is as follows:
Var checkClick = function (){
If ($ ('# remember-long'). attr ('checked') = "checked "){
$ ('# Remember-long'). attr ('checked', false );
$ ('# Remember-long'). val ("0 ")
}
Else {
$ ('# Remember-long'). attr ('checked', true );
$ ('# Remember-long'). val ("1 ")
}
}
$ ('. Remember'). bind ('click', function () {checkClick ();});
$ ("# Remember-long"). click (function () {checkClick ();});
// Remember to bind the checkbox and label that you log on. Writing cookies is not used for logon,
// The login process logic is to directly read the data in cookies and submit the data to the background during the election.
// Because the encrypted password is recorded in cookies, the append password is encrypted.

Bind keyboard carriage return event: need to introduce:  hotkeys plug-in
Copy codeThe Code is as follows:
$ (Document). bind ('keylow', 'return', function () {$ (". btn-submit"). trigger ('click ');});
// Press ENTER event bound to the keyboard

Help Microsoft eliminate IE6.0
Copy codeThe Code is as follows:
If ($. browser. msie & $. browser. version = "6.0 "){
// Helps Microsoft eliminate ie6
If ($. cookie ('mastershow ')! = "Hidden ")
$ ('Body '). append ('<div class = "master"> <p> your browser is <strong> IE6.0 </strong>, which has many vulnerabilities and poor user experience, microsoft will give up support, we recommend that you upgrade to <a href = "http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8" target = "_ blank" class = "red"> <strong> IE8.0 </strong> </a> or later, or use <a href = "http://firefox.com.cn/" target = "_ blank" class = "red"> <strong> firefox </strong> </a> browser </p> </div> <div class = "m-close-short"> close </div> <div class = "m-close m-close-long "> no longer displayed </div> ');
$ (". Master"). delay (1000). slideDown ('', function (){
$ (". M-close"). fadeIn ();
});
$ (". M-close-short"). click (function (){
$ (". M-close"). fadeOut ('', function (){
$ (". Master"). slideUp ();
});
});
$ (". M-close-long"). click (function (){
$ (". M-close"). fadeOut ('', function (){
$ (". Master"). slideUp ();
$. Cookie ('mastershow', 'did ');
});
});
}

About the page, This login page copies the design of a previous version of diandian.com. The kissy library is used to send back to the server for verification each time. The whole page is refreshed. I use jquery to use ajax asynchronous verification, during verification, the page element is set to unavailable to prevent repeated logon.
Package and download the complete file: jquery_login.rar
Author: Ethan. zhu