使用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 相关文章推荐
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Angular5.1新功能分享
Dec 21 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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
2006/12/23 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
jquery each()源代码
2011/02/14 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
RequireJs的使用详解
2017/02/19 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
详解supervisor使用教程
2017/11/21 Python
django+mysql的使用示例
2018/11/23 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python实现126邮箱发送邮件
2020/05/20 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
物流毕业生个人的自我评价
2014/02/13 职场文书
安全承诺书格式
2014/05/21 职场文书
服务宗旨标语
2014/07/01 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
工程部岗位职责范本
2015/04/11 职场文书
如何在Python中创建二叉树
2021/03/30 Python