First, you extract the asynchronous validation of a button click event as a separate function, you need to extract the variables in the button click event to define as global variables and add a variable editpass (to mark whether you're typing your password or a password read from a cookie).
The line is used to determine whether the password is input or read from cookies when the user exits to the login page within the program. Prevent two times of encryption from causing server validation to fail.
The main process is to extract the Ajax processing, while adding the server to verify the success of the remember password and the cancellation of the password to remember the operation, easy to read:
The process of remembering the password is handled when the page is initialized:
$ (function () {
var wrongtypename,//user name error type, can be directly as an error message array subscript
WRONGTYPEPWD,//user password error type
wrongnamehtml = new Array ("", "Please enter user name", "User name length is too short", "username is over 12 digits", "your username or password is wrong", "timeout, please login again"),
wrongpwdhtml = new Array ("", "Enter password", "password length is less than 6 digits", "", "password contains illegal characters"),
Editpass=false;
$ (' body ')-focus (); Let the input box no longer automatically get 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; Get Event Type
if ($ (this). attr ("id") = = "passwd") {
Editpass = true;
}
if (type = = ' Focus ') {
if (Items.hasclass (' error ')) {
$ (this). Val ("");
Items.removeclass (' error ');
}
Items.addclass (' Focus ');
else if (!$ (this). Val ()) {
Items.removeclass (' Focus ');
}
})
});
$ (". 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 of the length of the username and password, and gets the subscript for the array of error messages.
else {
var patrn =/^ (\w) {6,20}$/;
if (Plength < 6)
Wrongtypepwd = 2;
if (Plength > 50)
Wrongtypepwd = 3;
if (Plength > 6 && plength < 20) {
if (!patrn.exec (PWD))
Wrongtypepwd = 4; Here is a front-end judgment of the legality 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 user input information is completely legitimate, that is, the array subscript is all 0 begin to perform AJAX validation
Alert ($.cookie ("logout"));
if (Editpass) {
PWD = $.MD5 (pwd);
}
$ ("#passwd"). Val (pwd);
$ ("#login-form input"). attr (' disabled ', true);
$ ('. Remember '). Unbind (' click ');
Information has been submitted to the server, so all the input box buttons on the page are set to unavailable so that you can effectively avoid duplicate submissions
var remb = $ (' #remember-long '). Val ();
Ajaxcheck (uname, PWD, REMB);
}
});
var inputtip = function (index, tiphtml, Tipnum) {
$ (". Reg-tip"). EQ (index). HTML (Tiphtml[tipnum]);
if (Tipnum > 0)
$ (". Reg-item"). EQ (index). addclass ("error");
Else
$ (". Reg-item"). EQ (index). Removeclass ("error");
//Define Error Message page display function. Since the page has only two input boxes, I have directly specified the index here, and if there are many on the page, 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; Get the JSON data returned by the server
if (loginsuccess = = 0) {
if ($ (' #remember-long '). val () = 1) {//Remember password
$.cookie (' UserName ', uname, {expires:7, path: '/} ');
$.cookie (' Password ', pwd, {expires:7, path: '/} ');
}
else if ($ (' #remember-long '). val () = 0) {//Cancel the remembered password, 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 the Login checkbox and label click Binding.
if ($.browser.msie && $.browser.version = "6.0") {
Help Microsoft Eliminate IE6
if ($.cookie (' mastershow ')!= "hidden")
$ (' body '). Append (' <div class= ' master ' ><p> your browser is <strong>ie6.0</strong>, the vulnerability is more, the user experience is poor, Microsoft is going to give up support, and recommend that you upgrade to <a href= for your own PC security and best user experience http://windows.microsoft.com/zh-CN/internet-explorer/ Downloads/ie-8 "target=" _blank "class=" red "><strong>IE8.0</strong></a> above version or use <a href=" http://firefox.com.cn/"target=" _blank "class=" Red "><strong> Firefox </strong></a> browser </p> </div><div class= "M-close m-close-short" > Off </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 ', ' hidden ');
});
});
}
var Rememberpassword = function (logout) {//Automatic logon Check after page load completes
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 (' Focus ');
if (logout== "safe") {
$.cookie ("Logout", "", {expires:1, path: '/})
}
else{
$ ("#passwd"). Val (ckpwd); User password
$ (". Btn-submit"). Trigger (' click '); Automatic Login
}
}
else {
$ (' #remember-long '). Val ("0")
$ (' #remember-long '). attr (' checked ', false);
}
}
var logout = $.cookie ("logout");//To determine whether the user is exiting from within
Rememberpassword (logout);
$ (document). Bind (' KeyDown ', ' return ', function () {$ (". Btn-submit"). Trigger (' click ');});
})
About the background program involved in the page, I used the page level of ASPX, of course, you can also use ASHX to deal with. This background processing is responsible for verifying that the password is correct and setting the session value when the user logs on correctly, and, if necessary, to define constants in the background to verify the validation:
