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


Posted in Javascript onJuly 08, 2011

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

首先贴上展示图片:

默认状态:

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

出错状态:

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

等待状态:

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

工作流程:

在用户登录提交之前,在客户端验证输入框只做空值和长度判断,提交到服务器之后自动对提交来的字符串进行合法性以及长度的验证并且去除非法字符返回合法的字符串,根据返回的合法字符串进行登录验证,然后返回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
Javascript 相关文章推荐
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
AngularJs表单验证实例详解
May 30 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
layui实现数据分页功能
Jul 27 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 #Javascript
jquery 选项卡效果 新手代码
Jul 08 #Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 #Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 #Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 #Javascript
You might like
php array_filter除去数组中的空字符元素
2020/06/21 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP生成压缩文件实例
2015/02/07 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
详解使用React进行组件库开发
2018/02/06 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Python with的用法
2014/08/22 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
python中set常用操作汇总
2016/06/30 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
刑事代理授权委托书
2014/09/17 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2015年班干部工作总结
2015/04/29 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
python析构函数用法及注意事项
2021/06/22 Python