使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）

答案：需要引入插件jquery.md5.js 
可直接在IIS下运行； 
用户名：Ethan.zhu 
密 码：123456789 
完整文件下载：WebApplication1_zhaoxi.rar

首先将按钮单击事件的异步验证提取出来作为一个单独的函数，需要将按钮单击事件里面的变量提取出来定义为全局变量，并且增加一个变量editPass（用来标记是自己输入密码，还是从cookies中读取的密码） 
复制代码 代码如下:
 
var wrongTypeName, //用户名的错误类型，可以直接作为错误提示信息数组的下标 
wrongTypePwd, //用户密码的错误类型 
wrongNameHtml = new Array("", "请输入用户名", "用户名长度太短", "用户名长度超过12位", "您的用户名或密码错误", "超时，请重新登陆"), 
wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中含有非法字符"), 
editPass=false; 
 
这里从上一篇的按钮单击事件开始： 
复制代码 代码如下:
 
$(".btn-submit").click(function () { 
wrongTypeName = 0; 
wrongTypePwd = 0; 
var uname = $("#uname").val(), //用户名 
pwd = $("#passwd").val(), //用户密码 
plength = pwd.length, 
nlength = uname.length; //长度 
if (nlength == 0) 
wrongTypeName = 1; 
if (nlength > 0 && nlength < 2) 
wrongTypeName = 2; 
if (nlength > 20) 
wrongTypeName = 3; 
if (plength == 0) 
wrongTypePwd = 1; //这里是对用户名和密码长度的一个判断，并获取错误信息数组的下标。 
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; //这里是对用户密码合法性的前端判断，并返回错误数组的下标 
} 
} 

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

if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用户输入信息完全合法的情况下，即数组下标全部为0 开始执行ajax验证 
//alert($.cookie("logout")); 
if(editPass){ 
pwd = $.md5(pwd); 
} 
$("#passwd").val(pwd); 
$("#login-form input").attr('disabled', true); 
$('.remember').unbind('click'); 
//已经向服务器提交了信息，所以将页面上的所有输入框按钮设置成不可用状态，这样可以有效的避免重复提交 
var remb = $('#remember-long').val(); 
ajaxCheck(uname, pwd, remb); 
} 
}); 
 
变化在33行和41行， 

行用来判断密码是用户在程序内部退出到登录页面的时候是自行输入还是从cookies中读取的。防止二次加密造成服务器验证失败。 

行主要是将ajax处理过程提取出来，同时加入了服务器验证成功之后的记住密码和取消记住密码的操作，方便阅读： 
复制代码 代码如下:
 
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; //获取服务器返回的json数据 
if (loginSuccess == 0) { 
if ($('#remember-long').val() == 1) {//记住密码 
$.cookie('UserName', uname, { expires: 7, path: '/' }); 
$.cookie('Password', pwd, { expires: 7, path: '/' }); 
} 
else if ($('#remember-long').val() == 0) {//取消记住的密码，或者没有记住密码 
$.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 rememberPassword = function (logout) {//页面加载完成之后执行自动登录检查 
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); //用户名 
$('.reg-item').addClass('focus'); 
if (logout=="safe"){ 
$.cookie("logout","",{ expires: 1, path: '/' }) 
} 
else{ 
$("#passwd").val(ckpwd); //用户密码 
$(".btn-submit").trigger('click'); //自动登录 
} 
} 
else { 
$('#remember-long').val("0") 
$('#remember-long').attr('checked', false); 
} 
} 

var logout = $.cookie("logout"); 
　　　　//判断用户是否是从内部退出还是直接打开 
//如果是从内部退出，那么就不能再次自动登录进去，除非用户刷新了页面 
rememberPassword(logout); 
 
下面是完整的全新的前端脚本： 
复制代码 代码如下:
 
$(function () { 

var wrongTypeName, //用户名的错误类型，可以直接作为错误提示信息数组的下标 
wrongTypePwd, //用户密码的错误类型 
wrongNameHtml = new Array("", "请输入用户名", "用户名长度太短", "用户名长度超过12位", "您的用户名或密码错误", "超时，请重新登陆"), 
wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中含有非法字符"), 
editPass=false; 

$('body').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; //获取事件类型 
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(), //用户名 
pwd = $("#passwd").val(), //用户密码 
plength = pwd.length, 
nlength = uname.length; //长度 
if (nlength == 0) 
wrongTypeName = 1; 
if (nlength > 0 && nlength < 2) 
wrongTypeName = 2; 
if (nlength > 20) 
wrongTypeName = 3; 
if (plength == 0) 
wrongTypePwd = 1; //这里是对用户名和密码长度的一个判断，并获取错误信息数组的下标。 
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; //这里是对用户密码合法性的前端判断，并返回错误数组的下标 
} 
} 

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

if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用户输入信息完全合法的情况下，即数组下标全部为0 开始执行ajax验证 
//alert($.cookie("logout")); 
if(editPass){ 
pwd = $.md5(pwd); 
} 
$("#passwd").val(pwd); 
$("#login-form input").attr('disabled', true); 
$('.remember').unbind('click'); 
//已经向服务器提交了信息，所以将页面上的所有输入框按钮设置成不可用状态，这样

上一个：JQuery获取当前屏幕的高度宽度的实现代码
下一个：w3c声明下可运行 兼容性比较好的js对联广告集合