您的位置:时时app平台注册网站 > 彩世界网址 > 使用Jquery打造最佳用户体验的登录页面的实现代

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

2019-11-28 03:11

下一场管理七个输入框的收获和失去主题的平地风波:复制代码 代码如下: $('.reg-action .reg-input').each { var items = $.parent; if { items.addClass.bind('focus blur', function { var type = event.type; //获取事件类型 if { if (items.hasClass.val; items.removeClass; } items.addClass; } else if { items.removeClass; 在交付开关之后: 复制代码 代码如下: $.click { var wrongTypeName = 0,//客商名的谬误类型,能够一直当做不当提醒消息数组的下标 wrongTypePwd = 0,//顾客密码的大错特错类型 uname = $,//客户名 pwd = $,//用户密码 plength = pwd.length, nlength = uname.length,//长度 wrongNameHtml = new Array("", "请输入顾客名", "客商名长度太短", "客户名长度超越拾个人", "您的顾客名或密码错误", "超时,请重新登入"), wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "密码长度超过十四人", "密码中蕴藏不法字符"); //这里定义的是错误音讯的数组 if { wrongTypeName = 1; } if (nlength > 0 && nlength < 2) { wrongTypeName = 2; } if { wrongTypeName = 3; } if { wrongTypePwd = 1;//这里是对客商名和密码长度的三个推断,并获得错误消息数组的下标。 } else { var patrn = /^{6,20}$/; if wrongTypePwd = 2; if wrongTypePwd = 3; if (plength > 6 && plength < 20) { if wrongTypePwd = 4;//这里是对顾客密码合法性的前端判定,并回到错误数组的下标 } } var inputTip = function (index, tipHtml, tipNum) { $.html; if $.eq.addClass; else $.eq.removeClass; }//定义错误提醒音信页面呈现函数。由于页面独有四个输入框所以笔者那边一向钦定了index,要是页面上有非常多,能够利用$ inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); if (wrongTypePwd == 0 && wrongTypeName == 0) {//在顾客输入消息通通合法的图景下,即数组下标全体为0 起头进行ajax验证 //$.attr; $.attr; $.unbind; $.addClass; //已经向服务器交由了信息,所以将页面上的有所输入框按键设置成不可用状态,这样能够使得的幸免重复提交 var $params = "username=" uname "&password=" pwd "&remember=" $.val; $.ajax({ url: "CheckUserLogin.aspx", data: $params, dataType: "json", success: function .each { wrongTypeName = u.wrongTypeName; wrongTypePwd = u.wrongTypePwd; var loginSuccess = u.loginSuccess;//获取服务器重返的json数据 //alert; //alert; if { location.href = "/Members/Memb.html";//成功则直接跳转 } else {//登陆失败,再次来到本身的提醒音讯 $.removeClass; $.attr; inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); } }); }, error: function () {//ajax央求错误的状况重回超时重试。 wrongTypeName = 5; inputTip(0, wrongNameHtml, wrongTypeName); $.attr; $.bind { checkClick; $.removeClass; } }); 记住密码的checkbox以至文字的点击: 复制代码 代码如下: var checkClick = function () { if .attr == "checked") { $.attr; $.val } else { $.attr; $.val } } $.bind { checkClick; $.click { checkClick; //记住登陆的checkbox和label点击的绑定。这里只是写入cookies 未作登陆管理, //登陆管理的思绪是当选中的时候一向读取cookies中的数据交由给后台 //由于cookies中记录的事加密之后的密码所以要追加password已经加密 绑定键盘回车事件:要求引进:hotkeys插件 复制代码 代码如下: $.bind('keydown', 'return', function.trigger; //绑定键盘的回车事件 扶植微软扼杀IE6.0 复制代码 代码如下: if ($.browser.msie && $.browser.version == "6.0") { //帮衬微软消亡ie6 if ($.cookie != "hidden") $.append('

此地最首要介绍前端管理的历程。

关闭

第风姿罗曼蒂克贴上海展览中心示图片:

不再展现

供给引进插件jquery.md5.js 可直接在IIS下运维; 客户名:Ethan.zhu 密 码:123456789 完整文件下载:WebApplication1_jb51.rar首先将开关单击事件的异步验证提收取来作为八个独门的函数,需求将按键单击事件之中的变量提抽取来定义为全局变量,况且扩展一个变量editPass(用来标识是仁慈输入密码,照旧从cookies中读取的密码卡塔 尔(阿拉伯语:قطر‎复制代码 代码如下: var wrongTypeName, //客户名的乖谬类型,能够一向作为不当提醒音讯数组的下标 wrongTypePwd, //客户密码的错误类型 wrongNameHtml = new Array("", "请输入客户名", "顾客名长度太短", "客户名长度超越拾叁位", "您的顾客名或密码错误", "超时,请重新登入"), wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中含有不法字符"), editPass=false; 这里从上黄金时代篇的开关单击事件早先: 复制代码 代码如下: $.click { wrongTypeName = 0; wrongTypePwd = 0; var uname = $, //顾客名 pwd = $, //客商密码 plength = pwd.length, nlength = uname.length; //长度 if wrongTypeName = 1; if (nlength > 0 && nlength < 2) wrongTypeName = 2; if wrongTypeName = 3; if wrongTypePwd = 1; //这里是对客商名和密码长度的贰个剖断,并获得错误音讯数组的下标。 else { var patrn = /^{6,20}$/; if wrongTypePwd = 2; if wrongTypePwd = 3; if (plength > 6 && plength < 20) { if wrongTypePwd = 4; //这里是对客户密码合法性的前端推断,并赶回错误数组的下标 } } inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); if (wrongTypePwd == 0 && wrongTypeName == 0) {//在客户输入音信通通合法的场地下,即数组下标全体为0 开始施行ajax验证 //alert; if{ pwd = $.md5.val; $.attr; $.unbind; //已经向服务器交由了音讯,所以将页面上的有着输入框开关设置成不可用状态,这样能够使得的幸免重复提交 var remb = $.val(); ajaxCheck; } }); 变化在33行和41行, 行用来剖断密码是客户在前后相继内部退出到登入页面包车型大巴时候是电动输入还是从cookies中读取的。制止二回加密形成服务器验证战败。 行首要是将ajax管理进程提收取来,同有的时候候步向了服务器验证成功以后的一遍随地思念密码和注销记住密码的操作,方便阅读: 复制代码 代码如下: var ajaxCheck = function { $.addClass; var $params = "user_name=" decodeURI "&user_pwd=" decodeULX570I "&remember=" decodeUPRADOI; $.ajax({ type: 'POST', url: 'CheckUserLogin.aspx', //async: false, cache: false, dataType: 'json' data: $params, success: function { wrongTypeName = data.wrongTypeName; wrongTypePwd = data.wrongTypePwd; var loginSuccess = data.loginSuccess; //获取服务器重返的json数据 if { if .val {//记住密码 $.cookie('UserName', uname, { expires: 7, path: '/' }); $.cookie('Password', pwd, { expires: 7, path: '/' }); } else if .val {//打消记住的密码,只怕未有记住密码 $.cookie('UserName', null,{ expires: 7, path: '/' }); $.cookie('Password', null,{ expires: 7, path: '/' }); } location.href = "/Members/Members.html" } else { $.removeClass; $.attr; inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); } }, error: function () { wrongTypeName = 5; inputTip(0, wrongNameHtml, wrongTypeName); $.attr; $.bind { checkClick; $.removeClass } 页面初叶化的时候要对记住密码这几个进程進展拍卖: 复制代码 代码如下: var rememberPassword = function {//页面加载成功之后推行活动登入检查 var ckname = $.cookie; var ckpwd = $.cookie; if (ckname != "" && ckpwd != "" && ckname != null && ckpwd != null) { $.val $.attr; $; //客户名 $.addClass; if { $.cookie("logout","",{ expires: 1, path: '/' }) } else{ $; //客商密码 $.trigger; //自动登入 } } else { $.val $.attr; } } var logout = $.cookie; //剖断客商是不是是从中间退出照旧一向张开//假若是从内部退出,那么就不能重复自动登入进去,除非顾客刷新了页面 rememberPassword; 上边是完整的全新的前端脚本: 复制代码 代码如下: $ { var wrongTypeName, //顾客名的不当类型,能够直接充作不当提醒音讯数组的下标 wrongTypePwd, //客商密码的荒诞类型 wrongNameHtml = new Array("", "请输入顾客名", "客商名长度太短", "用户名长度超越十一个人", "您的客商名或密码错误", "超时,请重新登入"), wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中隐含不法字符"), editPass=false; $; //让输入框不再自动获取关节 $('.reg-action .reg-input').each { var items = $.parent; if { items.addClass.bind('focus blur', function { var type = event.type; //获取事件类型 if=="passwd"){ editPass = true; } if { if (items.hasClass.val; items.removeClass; } items.addClass; } else if { items.removeClass; $.click { wrongTypeName = 0; wrongTypePwd = 0; var uname = $, //客商名 pwd = $, //客户密码 plength = pwd.length, nlength = uname.length; //长度 if wrongTypeName = 1; if (nlength > 0 && nlength < 2) wrongTypeName = 2; if wrongTypeName = 3; if wrongTypePwd = 1; //这里是对顾客名和密码长度的八个推断,并获得错误音讯数组的下标。 else { var patrn = /^{6,20}$/; if wrongTypePwd = 2; if wrongTypePwd = 3; if (plength > 6 && plength < 20) { if wrongTypePwd = 4; //这里是对客户密码合法性的前端判定,并再次来到错误数组的下标 } } inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); if (wrongTypePwd == 0 && wrongTypeName == 0) {//在客商输入音信完全合法的情况下,即数组下标全部为0 开始实践ajax验证 //alert; if{ pwd = $.md5.val; $.attr; $.unbind; //已经向服务器交由了新闻,所以将页面上的有所输入框按键设置成不可用状态,那样可以有效的防止重复提交 var remb = $.val(); ajaxCheck; } }); var inputTip = function (index, tipHtml, tipNum) { $.html; if $.eq.addClass; else $.eq.removeClass; } //定义错误提醒音讯页面显示函数。由于页面独有七个输入框所以笔者这里一向钦定了index,假设页面上有相当多,能够运用$ var ajaxCheck = function { $.addClass; var $params = "user_name=" decodeURI "&user_pwd=" decodeU卡宴I "&remember=" decodeU福特ExplorerI; $.ajax({ type: 'POST', url: 'CheckUserLogin.aspx', //async: false, cache: false, dataType: 'json', data: $params, success: function { wrongTypeName = data.wrongTypeName; wrongTypePwd = data.wrongTypePwd; var loginSuccess = data.loginSuccess; //获取服务器重返的json数据 if { if .val {//记住密码 $.cookie('UserName', uname, { expires: 7, path: '/' }); $.cookie('Password', pwd, { expires: 7, path: '/' }); } else if .val {//撤除记住的密码,也许还未有记住密码 $.cookie('UserName', null,{ expires: 7, path: '/' }); $.cookie('Password', null,{ expires: 7, path: '/' }); } location.href = "/Members/Members.html" } else { $.removeClass; $.attr; inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); } }, error: function () { wrongTypeName = 5; inputTip(0, wrongNameHtml, wrongTypeName); $.attr; $.bind { checkClick; $.removeClass } var checkClick = function () { if .attr { $.attr; $.val } else { $.attr; $.val } } $.bind { checkClick; $.click { checkClick; //记住登入的checkbox和label点击的绑定。 if ($.browser.msie && $.browser.version == "6.0") { //扶助微软清除ie6 if ($.cookie != "hidden") $.append('

专门的职业流程:

在客户登入提交以前,在客商端验证输入框只做空值和长短剖断,提交到服务器之后自动对交付来的字符串举行合法性以至长度的验证并且去除违规字符重返合法的字符串,依照重临的官方字符串实行登入验证,然后再次来到json数据给前台管理,当中登录成功的号子是 loginSuccess=0,服务器再次回到数据以往全部工作付出前台管理。

不再突显

不再显示

接下来管理七个输入框的得到和失去宗旨的事件:复制代码 代码如下: $('.reg-action .reg-input').each { var items = $.parent; if { items.addClass.bind('focus blur', function { var type = event.type; //获取事件类型 if { if (items.hasClass.val; items.removeClass; } items.addClass; } else if { items.removeClass; 在付给开关之后: 复制代码 代码如下: $.click { var wrongTypeName = 0,//客户名的荒谬类型,能够直接当做不当提醒新闻数组的下标 wrongTypePwd = 0,//客商密码的荒诞类型 uname = $,//客商名 pwd = $,//顾客密码 plength = pwd.length, nlength = uname.length,//长度 wrongNameHtml = new Array("", "请输入客商名", "顾客名长度太短", "客户名长度当先11位", "您的客商名或密码错误", "超时,请重新登入"), wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "密码长度超越二十人", "密码中隐含不法字符"); //这里定义的是错误音讯的数组 if { wrongTypeName = 1; } if (nlength > 0 && nlength < 2) { wrongTypeName = 2; } if { wrongTypeName = 3; } if { wrongTypePwd = 1;//这里是对顾客名和密码长度的叁个决断,并拿走错误新闻数组的下标。 } else { var patrn = /^{6,20}$/; if wrongTypePwd = 2; if wrongTypePwd = 3; if (plength > 6 && plength < 20) { if wrongTypePwd = 4;//这里是对顾客密码合法性的前端决断,并赶回错误数组的下标 } } var inputTip = function (index, tipHtml, tipNum) { $.html; if $.eq.addClass; else $.eq.removeClass; }//定义错误提示音信页面展现函数。由于页面独有五个输入框所以作者那边从来钦命了index,假若页面上有相当多,能够运用$ inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); if (wrongTypePwd == 0 && wrongTypeName == 0) {//在客户输入音信通通合法的状态下,即数组下标全部为0 早先进行ajax验证 //$.attr; $.attr; $.unbind; $.addClass; //已经向服务器交由了音讯,所以将页面上的持有输入框按键设置成不可用状态,那样可以使得的防止再次提交 var $params = "username=" uname "&password=" pwd "&remember=" $.val; $.ajax({ url: "CheckUserLogin.aspx", data: $params, dataType: "json", success: function .each { wrongTypeName = u.wrongTypeName; wrongTypePwd = u.wrongTypePwd; var loginSuccess = u.loginSuccess;//获取服务器重临的json数据 //alert; //alert; if { location.href = "/Members/Memb.html";//成功则直接跳转 } else {//登入失利,再次来到自个儿的提醒信息 $.removeClass; $.attr; inputTip(0, wrongNameHtml, wrongTypeName); inputTip(1, wrongPwdHtml, wrongTypePwd); } }); }, error: function () {//ajax诉求错误的状态重回超时重试。 wrongTypeName = 5; inputTip(0, wrongNameHtml, wrongTypeName); $.attr; $.bind { checkClick; $.removeClass; } }); 记住密码的checkbox以至文字的点击: 复制代码 代码如下: var checkClick = function () { if .attr == "checked") { $.attr; $.val } else { $.attr; $.val } } $.bind { checkClick; $.click { checkClick; //记住登入的checkbox和label点击的绑定。这里只是写入cookies 未作登陆管理, //登陆管理的笔触是当选中的时候一向读取cookies中的数据提交给后台 //由于cookies中记录的事加密之后的密码所以要加进password已经加密 绑定键盘回车事件:需求引进:hotkeys插件 复制代码 代码如下: $.bind('keydown', 'return', function.trigger; //绑定键盘的回车事件 扶植微软消弭IE6.0 复制代码 代码如下: if ($.browser.msie && $.browser.version == "6.0") { //补助微软解除ie6 if ($.cookie != "hidden") $.append('

你的浏览器是IE6.0,漏洞非常多,顾客体验非常糟糕,微软官方将要废弃补助,为了作者计算机安然无事和得到最好用户体验提议您依照自身供给进步至IE8.0如上版本也许利用火狐浏览器

$;这样鼠标宗旨就不会现出在输入框内。

以下操作私下认可客性格很顽强在艰难险阻或巨大压力面前不屈端以致开启js扶植,noscript情况请自行编排代码达成

'); $.delay.slideDown { $; }); $.click { $.fadeOut { $; }); }); $.click { $.fadeOut { $; $.cookie('masterShow', 'hidden'); }); }); } var rememberPassword = function {//页面加载成功今后实施机关登入检查 var ckname = $.cookie; var ckpwd = $.cookie; if (ckname != "" && ckpwd != "" && ckname != null && ckpwd != null) { $.val $.attr; $; //客商名 $.addClass; if { $.cookie("logout","",{ expires: 1, path: '/' }) } else{ $; //顾客密码 $.trigger; //自动登陆 } } else { $.val $.attr; } } var logout = $.cookie;//决断顾客是或不是是从里面退出 rememberPassword.bind('keydown', 'return', function .trigger 关于页面中涉嫌的后台程序,笔者用了页面级其余aspx,当然你也得以选拔ashx来拍卖。这一个后台管理担负验证密码是或不是科学并在客户不利登入的景色下设置session值,借使供给演示,能够在后台定义常量来做表明判定: 复制代码 代码如下: Hashtable ht = new Hashtable(); string uname = Request.Params["user_name"]; string pwd = Request.Params["user_pwd"]; int wrongTypeName = 0; int wrongTypePwd = 0; uname = PageValidate.InputText; if (Validator.StrIsNullOrEmpty { wrongTypeName = 1; } if (Validator.StrIsNullOrEmpty { wrongTypePwd = 1; } if (!string.IsNullOrEmpty && !string.IsNullOrEmpty { //以下使用常量来做示范: string userName="ethan.zhu"; string password ="";//要求MD5加密其后的字符串 if (uname==userName&&password==pwd ) ht.Add; else wrongTypeName = 4;//再次回到客户名或密码错误 if (wrongTypeName > 0 || wrongTypePwd > 0) { ht.Add("wrongTypeName", wrongTypeName); ht.Add("wrongTypePwd", wrongTypePwd); } Response.Write; } Response.End(); } 将Hashtable调换来json: 复制代码 代码如下: public static string CreateJsonParams { string returnStr = ""; foreach (DictionaryEntry item in items) { returnStr = """ item.Key.ToString() "":"" item.Value.ToString() "","; } return "{" returnStr.Substring(0, returnStr.Length - 1) "}"; }

您的浏览器是IE6.0,漏洞相当多,顾客体验非常糟糕,微软官方将在屏弃扶植,为了自个儿计算机安然无事和获得最棒客商体验提议你依据自己必要升高至IE8.0如上版本也许应用火狐浏览器

'); $.delay.slideDown { $; }); $.click { $.fadeOut { $; }); }); $.click { $.fadeOut { $; $.cookie('masterShow', 'hidden'); }); }); } 关于页面,那几个登陆页面抄袭了点点网在此以前叁个版本的安插,点点使用kissy库每一次都发回服务器验证,整个页面的底子代谢,小编改用jquery使用ajax异步验证,并在印证的进度少将页面成分设置为不可用,幸免再一次登陆。 完整文件打包下载:jquery_login.rar 作者:Ethan.zhu

此处最首要介绍前端管理的进度。

关闭

差之毫厘状态:

先是在页面打开未来让页面获得关节:

以下操作私下认可客服端以至开启js支持,noscript情状请自行编排代码完结

$;这样鼠标大旨就不会现出在输入框内。

暗许状态:

你的浏览器是IE6.0,漏洞很多,顾客体验相当差,微软官方将在扬弃辅助,为了自个儿Computer安然依然和得到最棒客商体验提议你根据本身供给提高至IE8.0上述版本可能应用火狐浏览器

先是在页面展开未来让页面获得关节:

关闭

在客商登陆提交早先,在顾客端验证输入框只做空值和长度判定,提交到服务器之后自动对交付来的字符串实行合法性以至长度的辨证而且去除违法字符重回合法的字符串,依照重返的合法字符串进行登入验证,然后回来json数据给前台管理,当中登入成功的符号是 loginSuccess=0,服务器重回数据之后有所专业付出前台管理。

等候状态:

'); $.delay.slideDown { $; }); $.click { $.fadeOut { $; }); }); $.click { $.fadeOut { $; $.cookie('masterShow', 'hidden'); }); }); } 关于页面,那些登陆页面抄袭了点点网在此以前多少个本子的规划,点点使用kissy库每一回都发回服务器验证,整个页面包车型客车刷新,笔者改用jquery使用ajax异步验证,并在验证的进度大校页面成分设置为不可用,幸免重复登陆。 完整文件打包下载:jquery_login.rar 作者:Ethan.zhu

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:使用Jquery打造最佳用户体验的登录页面的实现代

关键词: