使用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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
详解jQuery事件
Jan 13 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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
Content-type 的说明
2006/10/09 PHP
利用PHP动态生成VRML网页
2006/10/09 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python代码过长的换行方法
2018/07/19 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python输入多行字符串的方法总结
2019/07/02 Python
Django REST framework内置路由用法
2019/07/26 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
保险专业大专生求职信
2013/10/26 职场文书
旅游网创业计划书
2014/01/31 职场文书
教师对学生的评语
2014/04/28 职场文书
论群众路线学习笔记
2014/11/06 职场文书
小石潭记导游词
2015/02/03 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL