使用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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 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
phpmyadmin操作流程
2006/10/09 PHP
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
Python中title()方法的使用简介
2015/05/20 Python
Python 函数基础知识汇总
2018/03/09 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python计算auc的方法
2020/09/09 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS