jquery实现登录成功界面_使用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,//用户名的错误