- 时间：2021-10-19 03:06 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：使用Jquery打造最佳用户体验的登录页面的实现代码
以下操作默认客服端以及开启js支持，noscript情况请自行编写代码实现
首先贴上展示图片：
默认状态：
[img]http://files.jb51.net/upload/201107/20110708133320733.png[/img]
出错状态：
[img]http://files.jb51.net/upload/201107/20110708133321506.png[/img]
等待状态：
[img]http://files.jb51.net/upload/201107/20110708133321252.png[/img]
工作流程：
在用户登录提交之前，在客户端验证输入框只做空值和长度判断，提交到服务器之后自动对提交来的字符串进行合法性以及长度的验证并且去除非法字符返回合法的字符串，根据返回的合法字符串进行登录验证，然后返回json数据给前台处理，其中登录成功的标记是 loginSuccess=0，服务器返回数据之后所有工作交给前台处理。
这里重点介绍前端处理的过程。
首先在页面打开之后让页面获取焦点：
$('body').focus();这样鼠标焦点就不会出现在输入框内。
然后处理两个输入框的获取和失去焦点的事件：
[url=http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8]$(".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[/url]
作者:Ethan.zhu
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
