Use Jquery to build a logon page with the best user experience-remember the password automatic login function (including background code)

Jquery. md5.js plug-in needs to be introduced
It can be run directly in IIS;
Username: Ethan. zhu
Password: 123456789
Download the complete file: WebApplication1_jb51.rar

First, extract the asynchronous verification of the button-click event as a separate function. You need to extract the variables in the button-Click Event and define them as global variables, in addition, an editPass variable is added to indicate whether the password is entered or read from cookies)
Copy codeThe Code is as follows:
Var wrongTypeName, // The Error Type of the user name, which can be directly used as the subscript of the error message Array
WrongTypePwd, // Error Type of User Password
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 contains invalid characters "),
EditPass = false;

Click the event button in the previous article:
Copy codeThe Code is as follows:
$ (". Btn-submit"). click (function (){
WrongTypeName = 0;
WrongTypePwd = 0;
Var uname = $ ("# uname"). val (), // User Name
Pwd = $ ("# passwd"). val (), // User Password
Plength = pwd. length,
Nlength = uname. length; // length
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> 50)
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.
}
}

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.
// Alert ($. cookie ("logout "));
If (editPass ){
Pwd = $. md5 (pwd );
}
$ ("# Passwd"). val (pwd );
$ ("# Login-form input"). attr ('Disabled ', true );
$ ('. Remember'). unbind ('click ');
// 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 remb = $ ('# remember-long'). val ();
AjaxCheck (uname, pwd, remb );
}
});

Rows 33 and 41 are changed,

The password is used to determine whether the user enters the password or reads the password from cookies when exiting the logon page. Prevent server verification failures caused by secondary encryption.

The main line is to extract the ajax processing process, and add the Remember password and cancel Remember password after the server verification is successful, which is easy to read:
Copy codeThe Code is as follows:
Var ajaxCheck = function (uname, pwd, remb ){
$ (". Btn-master"). addClass ("visibility ");
Var $ params = "user_name =" + decodeURI (uname) + "& user_pwd =" + decodeURI (pwd) + "& remember =" + decodeURI (remb );
$. Ajax ({
Type: 'post ',
Url: 'checkuserlogin. aspx ',
// Async: false,
Cache: false,
DataType: 'json'
Data: $ params,
Success: function (data, status ){
WrongTypeName = data. wrongTypeName;
WrongTypePwd = data. wrongTypePwd;
Var loginSuccess = data. loginSuccess; // obtain the json data returned by the server
If (loginSuccess = 0 ){
If ($ ('# remember-long'). val () = 1) {// remember the password
$. Cookie ('username', uname, {expires: 7, path :'/'});
$. Cookie ('Password', pwd, {expires: 7, path :'/'});
}
Else if ($ ('# remember-long'). val () = 0) {// cancel the password you remember, or do not remember the password
$. Cookie ('username', null, {expires: 7, path :'/'});
$. Cookie ('Password', null, {expires: 7, path :'/'});
}
Location. href = "/Members/Members.html"
}
Else {
$ (". Btn-master"). removeClass ("visibility ");
$ ("# Login-form input"). attr ('Disabled ', false );
InputTip (0, wrongNameHtml, wrongTypeName );
InputTip (1, wrongPwdHtml, wrongTypePwd );
}
},
Error: function (){
WrongTypeName = 5;
InputTip (0, wrongNameHtml, wrongTypeName );
$ ("# Login-form input"). attr ('Disabled ', false );
$ ('. Remember'). bind ('click', function () {checkClick ();});
$ (". Btn-master"). removeClass ("visibility ");
}
})
}

During page initialization, you must handle the process of remembering the password:
Copy codeThe Code is as follows:
Var rememberPassword = function (logout) {// perform the automatic logon check after the page is loaded.
Var ckname = $. cookie ('username ');
Var ckpwd = $. cookie ("Password ");
If (ckname! = "" & Ckpwd! = "" & Ckname! = Null & ckpwd! = Null ){
$ ('# Remember-long'). val ("1 ")
$ ('# Remember-long'). attr ('checked', true );
$ ("# Uname"). val (ckname); // User Name
$ ('. Reg-item'). addClass ('focal ');
If (logout = "safe "){
$. Cookie ("logout", "", {expires: 1, path :'/'})
}
Else {
$ ("# Passwd"). val (ckpwd); // User Password
$ (". Btn-submit"). trigger ('click'); // automatically log on
}
}
Else {
$ ('# Remember-long'). val ("0 ")
$ ('# Remember-long'). attr ('checked', false );
}
}

Var logout = $. cookie ("logout ");
// Determine whether the user exits from the internal server or directly opens the client.
// If you exit from the internal system, you cannot log in again automatically unless the user refresh the page.
RememberPassword (logout );

The following is a complete new front-end script:
Copy codeThe Code is as follows:
$ (Function (){

Var wrongTypeName, // The Error Type of the user name, which can be directly used as the subscript of the error message Array
WrongTypePwd, // Error Type of User Password
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 contains invalid characters "),
EditPass = false;

$ ('Body'). focus (); // stop the input box from Automatically Obtaining the focus.

$ ('. 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 ($ (this). attr ("id") = "passwd "){
EditPass = true;
}
If (type = 'focal '){
If (items. hasClass ('error ')){
$ (This). val ("");
Items. removeClass ('error ');
}
Items. addClass ('focal ');
} Else if (! $ (This). val ()){
Items. removeClass ('focal ');
}
})
});

$ (". Btn-submit"). click (function (){
WrongTypeName = 0;
WrongTypePwd = 0;
Var uname = $ ("# uname"). val (), // User Name
Pwd = $ ("# passwd"). val (), // User Password
Plength = pwd. length,
Nlength = uname. length; // length
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> 50)
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.
}
}

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.
// Alert ($. cookie ("logout "));
If (editPass ){
Pwd = $. md5 (pwd );
}
$ ("# Passwd"). val (pwd );
$ ("# Login-form input"). attr ('Disabled ', true );
$ ('. Remember'). unbind ('click ');
// 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 remb = $ ('# remember-long'). val ();
AjaxCheck (uname, pwd, remb );
}
});

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 ()

Var ajaxCheck = function (uname, pwd, remb ){
$ (". Btn-master"). addClass ("visibility ");
Var $ params = "user_name =" + decodeURI (uname) + "& user_pwd =" + decodeURI (pwd) + "& remember =" + decodeURI (remb );
$. Ajax ({
Type: 'post ',
Url: 'checkuserlogin. aspx ',
// Async: false,
Cache: false,
DataType: 'json ',
Data: $ params,
Success: function (data, status ){
WrongTypeName = data. wrongTypeName;
WrongTypePwd = data. wrongTypePwd;
Var loginSuccess = data. loginSuccess; // obtain the json data returned by the server
If (loginSuccess = 0 ){
If ($ ('# remember-long'). val () = 1) {// remember the password
$. Cookie ('username', uname, {expires: 7, path :'/'});
$. Cookie ('Password', pwd, {expires: 7, path :'/'});
}
Else if ($ ('# remember-long'). val () = 0) {// cancel the password you remember, or do not remember the password
$. Cookie ('username', null, {expires: 7, path :'/'});
$. Cookie ('Password', null, {expires: 7, path :'/'});
}
Location. href = "/Members/Members.html"
}
Else {
$ (". Btn-master"). removeClass ("visibility ");
$ ("# Login-form input"). attr ('Disabled ', false );
InputTip (0, wrongNameHtml, wrongTypeName );
InputTip (1, wrongPwdHtml, wrongTypePwd );
}
},
Error: function (){
WrongTypeName = 5;
InputTip (0, wrongNameHtml, wrongTypeName );
$ ("# Login-form input"). attr ('Disabled ', false );
$ ('. Remember'). bind ('click', function () {checkClick ();});
$ (". Btn-master"). removeClass ("visibility ");
}
})
}

Var checkClick = function (){
If ($ ('# remember-long'). attr ('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.

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 ');
});
});
}

Var rememberPassword = function (logout) {// perform the automatic logon check after the page is loaded.
Var ckname = $. cookie ('username ');
Var ckpwd = $. cookie ("Password ");
If (ckname! = "" & Ckpwd! = "" & Ckname! = Null & ckpwd! = Null ){
$ ('# Remember-long'). val ("1 ")
$ ('# Remember-long'). attr ('checked', true );
$ ("# Uname"). val (ckname); // User Name
$ ('. Reg-item'). addClass ('focal ');
If (logout = "safe "){
$. Cookie ("logout", "", {expires: 1, path :'/'})
}
Else {
$ ("# Passwd"). val (ckpwd); // User Password
$ (". Btn-submit"). trigger ('click'); // automatically log on
}
}
Else {
$ ('# Remember-long'). val ("0 ")
$ ('# Remember-long'). attr ('checked', false );
}
}

Var logout = $. cookie ("logout"); // checks whether the user exits from the internal server.
RememberPassword (logout );

$ (Document). bind ('keylow', 'return', function () {$ (". btn-submit"). trigger ('click ');});
})

For background programs involved in pages, I use page-level aspx. Of course, you can also use ashx for processing. This background processing is responsible for verifying that the password is correct and setting the session value when the user logs on to the console correctly. If you need to demonstrate this, you can define constants in the background for verification and judgment:
Copy codeThe Code is as follows:
Hashtable ht = new Hashtable ();
String uname = Request. Params ["user_name"];
String pwd = Request. Params ["user_pwd"];
Int wrongTypeName = 0;
Int wrongTypePwd = 0;
Uname = PageValidate. InputText (uname, 30 );

If (Validator. StrIsNullOrEmpty (uname ))
{
WrongTypeName = 1;
}
If (Validator. StrIsNullOrEmpty (pwd ))
{
WrongTypePwd = 1;
}
If (! String. IsNullOrEmpty (uname )&&! String. IsNullOrEmpty (pwd ))
{
// The following uses constants for Demonstration:
String userName = "ethan. zhu ";
String password = ""; // string that requires MD5 Encryption
If (uname = userName & password = pwd)
Ht. Add ("loginSuccess", 0 );
Else
WrongTypeName = 4; // the user name or password is returned.

If (wrongTypeName> 0 | wrongTypePwd> 0)
{
Ht. Add ("wrongTypeName", wrongTypeName );
Ht. Add ("wrongTypePwd", wrongTypePwd );
}
Response. Write (CreateJsonParams (ht ));
}
Response. End ();
}

Convert Hashtable to json:
Copy codeThe Code is as follows:
Public static string CreateJsonParams (Hashtable items)
{
String returnStr = "";
Foreach (DictionaryEntry item in items)
{
ReturnStr + = "\" "+ item. Key. ToString () +" \ ": \" "+ item. Value. ToString () + "\",";
}
Return "{" + returnStr. Substring (0, returnStr. Length-1) + "}";

}