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

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

首先贴上展示图片:

默认状态:

出错状态:

等待状态:

工作流程:

在用户登录提交之前,在客户端验证输入框只做空值和长度判断,提交到服务器之后自动对提交来的字符串进行合法性以及长度的验证并且去除非法字符返回合法的字符串,根据返回的合法字符串进行登录验证,然后返回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

时间: 2024-11-08 23:43:45

使用Jquery打造最佳用户体验的登录页面的实现代码_jquery的相关文章

使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)_jquery

需要引入插件jquery.md5.js 可直接在IIS下运行: 用户名:Ethan.zhu 密 码:123456789 完整文件下载:WebApplication1_jb51.rar 首先将按钮单击事件的异步验证提取出来作为一个单独的函数,需要将按钮单击事件里面的变量提取出来定义为全局变量,并且增加一个变量editPass(用来标记是自己输入密码,还是从cookies中读取的密码) 复制代码 代码如下: var wrongTypeName, //用户名的错误类型,可以直接作为错误提示信息数组的下

打造最佳用户体验的团购导航网站

中介交易 SEO诊断 淘宝客 云主机 技术大厅 作为一个工资能勉强维持生活的小P民,每天都想着让生活节约些,所以就会每天到各大团购导航网站去转转,看看有没有自己需要能团购的东西,每天都会尽可能的去看团购网站大全,但是有时候看 的团购导航网站太多了感觉很费事,因为很多团购商品的信息都是一样的,而且有些团购网站还要花不少时间才能找到自己想要的东西,感觉很不方便,要是有一个团购网站大全是这样的就好了. 一.每个城市的最新团购商品 当然,这个貌似很多团购网站都有了, 这是必须有的,不然每天看到的都是别的

利用数据分析打造最佳用户在线体验

以下是我昨天应邀在Omniture的推广活动上主题演讲的提纲.Adobe收购Omniture,这个颇具新闻价值的行业事件,并没有得到应有的关注(虽然我个人认为微软收购Omniture以对抗Google似乎更合逻辑).这也从侧面反映了国内数据分析行业的欠发达.估计大部分人看到我这篇博客的第一反应是:Omniture,干啥的? ************************************************************ 数据分析帮助艺龙打造最佳用户体验 eLong:to

完善三个小细节 助力打造软件站最佳用户体验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 随着信息技术时代的推进和发展,现在的网站不光光只是能为用户带来浏览新闻.图片的功能了,更多用户开始利用网站来下载一些自己需要的软件,这也促进了一系列的软件下载站的诞生.软件下载站目前竞争还是相当激烈的,但是根据调查却发现,大部分用户对于某些软件站都是非常厌烦的,何解?原因就是某些软件下载站的用户体验极差,让用户无法正常.方便地下载到自己想要的

易观峰会大佬云集海尔商城分享“创造全流程最佳用户体验”

电子商务领域最高规格的盛会,2013易观电子商务年会于3月27日盛大开幕,"大浪淘商",包括天猫CEO张勇.苏宁副董事长孙为民.当当网CEO李国庆.凡客CEO陈年.一号店CEO于刚,海尔商城CEO杨励耕等在内的众多知名电商行业领袖人物齐集一堂,对整个电子商务行业进行梳理并对电子商务的未来进行前瞻性的展望.海尔商城CEO杨励耕在会上分享了海尔商城为创造全流程最佳用户体验的实践经验.海尔商城凭借其独有的虚实网融合模式,为用户的大家电网购开通了一条真正方便快捷之路.定制化的产品服务,强大的送

Galaxy mini 2为保“最佳用户体验”未获得果冻豆更新

三星之前曾经表示,去年发布的Galaxy mini 2也将获得果冻豆更新,不过,现在根据三星西班牙公司表示,Galaxy mini 2不会获得果冻豆更新.三星西班牙公司给出的理由是,Galaxy mini 2升级到果冻豆之后,不能够保证"最佳用户体验". 三星这种决定,肯定会让许多Galaxy mini 2用户不满,之前,他们都希望自己的Galaxy mini 2可以升级到Android果冻豆操作系统. Galaxy mini 2,在2012年3月发布,采用单核800 MHz处理器,A

做好网站用户体验在网站页面设计上的一些要求

如今,对于做网站优化的广大站长朋友而言,用户体验成为了大家最为关注的重点,因为在我们做优化的最终目的是为了让用户能够更加容易的来到我们的网站,访问我们的网站内容,从而帮助他们解决问题,我们所谓的用户体验指的就是一切从用户的角度出发,时时刻刻为用户考虑,而不是单单为了排名流量来做优化,而且用户体验也如何是会对网站的转化率产生很大的影响,所以说对于我们每一个站长来说做好网站用户体验都是义不容辞的责任,下面笔者主要谈谈做好网站用户体验在网站页面设计上的一些要求. 第一.首页设计要合理 当用户来到网站的

用户体验:网站确认页面设计注意事项

相关文章: 用户体验:在什么时候设计网站确认页面 用户体验:网站确认页面以何种形式表现 白话大原则: 让我立马注意到--否则就没必要确认.必须得与当前页面区分,凸显出来.所以一般二次确认页面弹出时,当前页面应该屏蔽使用. 让我不反感--除非想赶走客户.视事件本身的严重程度采用适合的图标(信息.错误.问号).措辞,视觉变化不至于太过突然. 让我一看就知道如何选择--稀里糊涂,词不达意的二次确 认是最要命的已经干扰了正常流程,再让用户在一个弹出页面上思考不知所措?短句子,不兜圈,信达雅的文案,与文案

Session过期后自动跳转到登录页面的实例代码_java

最近做了一个项目其中有需求,要实现自动登录功能,通过查阅相关资料,打算用session监听来做,下面给大家列出了配置监听器的方法: 1.在项目的web.xml文件中添加如下代码: <!--添加Session监听器--> <listener> <listener-class> 监听器路径 </listener-class> </listener> 2.编写java类. public class SessionListener implements