使用Jquery打造最佳用户体验的登录页面的实现代码

以下操作默认客服端以及开启js支持，noscript情况请自行编写代码实现

首先贴上展示图片：

默认状态：

出错状态：

等待状态：

工作流程：

在用户登录提交之前，在客户端验证输入框只做空值和长度判断，提交到服务器之后自动对提交来的字符串进行合法性以及长度的验证并且去除非法字符返回合法的字符串，根据返回的合法字符串进行登录验证，然后返回json数据给前台处理，其中登录成功的标记是 loginSuccess=0，服务器返回数据之后所有工作交给前台处理。

这里重点介绍前端处理的过程。

首先在页面打开之后让页面获取焦点：

$('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 (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 () {
var wrongTypeName = 0,//用户名的错误类型，可以直接作为错误提示信息数组的下标
wrongTypePwd = 0,//用户密码的错误类型
uname = $("#uname").val(),//用户名
pwd = $("#passwd").val(),//用户密码
plength = pwd.length,
nlength = uname.length,//长度
wrongNameHtml = new Array("", "请输入用户名", "用户名长度太短", "用户名长度超过12位", "您的用户名或密码错误", "超时，请重新登陆"),
wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "密码长度超过20位", "密码中含有非法字符");
//这里定义的是错误信息的数组

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 > 20)
wrongTypePwd = 3;
if (plength > 6 && plength < 20) {
if (!patrn.exec(pwd))
wrongTypePwd = 4;//这里是对用户密码合法性的前端判断，并返回错误数组的下标
}
}

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");
}//定义错误提示信息页面显示函数。由于页面只有两个输入框所以我这里直接指定了index，如果页面上有很多，可以使用$(this).index()

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

if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用户输入信息完全合法的情况下，即数组下标全部为0 开始执行ajax验证
//$(".reg-input").attr('disabled', true);
$("#login-form input").attr('disabled', true);
$('.remember').unbind('click');
$(".btn-master").addClass("visibility");
//已经向服务器提交了信息，所以将页面上的所有输入框按钮设置成不可用状态，这样可以有效的避免重复提交
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;//获取服务器返回的json数据
//alert(wrongTypeName);
//alert(wrongTypePwd);
if (loginSuccess == 0) {
location.href = "/Members/Memb.html";//成功则直接跳转
} else {//登录失败，返回友好的提示信息
$(".btn-master").removeClass("visibility");
$("#login-form input").attr('disabled', false);
inputTip(0, wrongNameHtml, wrongTypeName);
inputTip(1, wrongPwdHtml, wrongTypePwd);
}
});
},
error: function () {//ajax请求错误的情况返回超时重试。
wrongTypeName = 5;
inputTip(0, wrongNameHtml, wrongTypeName);
$("#login-form input").attr('disabled', false);
$('.remember').bind('click', function () { checkClick(); });
$(".btn-master").removeClass("visibility");
}
});

}
});

记住密码的checkbox以及文字的点击：


代码如下:

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(); });
//记住登录的checkbox和label点击的绑定。这里只是写入cookies 未作登录处理，
//登录处理的思路是当选中的时候直接读取cookies中的数据提交给后台
//由于cookies中记录的事加密之后的密码所以要追加password已经加密

绑定键盘回车事件：需要引入：hotkeys插件


代码如下:

$(document).bind('keydown', 'return', function(){$(".btn-submit").trigger('click');});
//绑定键盘的回车事件

帮助微软消灭IE6.0


代码如下:

if ($.browser.msie && $.browser.version == "6.0") {
//帮助微软消灭ie6
if ($.cookie('masterShow') != "hidden")
$('body').append('<div class="master"><p>您的浏览器是<strong>IE6.0</strong>，漏洞较多，用户体验较差，微软官方将要放弃支持，为了自身电脑安全和获取最佳用户体验建议你根据自身需求升级至<a href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8" target="_blank" class="red"><strong>IE8.0</strong></a>以上版本或者使用<a href="http://firefox.com.cn/" target="_blank" class="red"><strong>火狐</strong></a>浏览器</p></div><div class="m-close m-close-short">关闭</div><div class="m-close m-close-long">不再显示</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');
});
});
}

关于页面，这个登录页面抄袭了点点网以前一个版本的设计，点点使用kissy库每次都发回服务器验证，整个页面的刷新，我改用jquery使用ajax异步验证，并在验证的过程中将页面元素设置为不可用，防止重复登录。
完整文件打包下载：jquery_login.rar
作者:Ethan.zhu