使用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 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
js 调用百度分享功能
2017/02/27 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python 实现归并排序算法
2012/06/05 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
django实现用户登陆功能详解
2017/12/11 Python
python实现桌面壁纸切换功能
2019/01/21 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
浅析Python 多行匹配模式
2020/07/24 Python
详解python中的异常和文件读写
2021/01/03 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
课堂教学改革实施方案
2014/03/17 职场文书
会计专业自荐信
2014/06/03 职场文书
花坛标语大全
2014/06/30 职场文书
国际金融专业自荐信
2014/07/05 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android