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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:05 PM

使用者體驗登入頁面

需要引入插件jquery.md5.js
可直接在IIS下运行；
用户名：Ethan.zhu
密码：123456789
完整文件下载：WebApplication1_jb51.rar

首先将按钮单击事件的异步验证提取出来作为一个单独的函数，需要将按钮单击事件里面的变量提取出来定义为全局变量，并且增加一个变量editPass（用来标记是自己输入密码，还是从cookies中读取的密码）

复制代码代码如下:

 
var wrongTypeName, //用户名的错误类型，可以直接作为错误提示信息数组的下标 
wrongTypePwd, //用户密码的错误类型 
wrongNameHtml = new Array("", "请输入用户名", "用户名长度太短", "用户名长度超过12位", "您的用户名或密码错误", "超时，请重新登陆"), 
wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中含有非法字符"), 
editPass=false; 

这里从上一篇的按钮单击事件开始：

复制代码代码如下:

 
$(".btn-submit").click(function () { 
wrongTypeName = 0; 
wrongTypePwd = 0; 
var uname = $("#uname").val(), //用户名 
pwd = $("#passwd").val(), //用户密码 
plength = pwd.length, 
nlength = uname.length; //长度 
if (nlength == 0) 
wrongTypeName = 1; 
if (nlength > 0 && nlength wrongTypeName = 2; 
if (nlength > 20) 
wrongTypeName = 3; 
if (plength == 0) 
wrongTypePwd = 1; //这里是对用户名和密码长度的一个判断，并获取错误信息数组的下标。 
else { 
var patrn = /^(\w){6,20}$/; 
if (plength wrongTypePwd = 2; 
if (plength > 50) 
wrongTypePwd = 3; 
if (plength > 6 && plength if (!patrn.exec(pwd)) 
wrongTypePwd = 4; //这里是对用户密码合法性的前端判断，并返回错误数组的下标 
} 
} 

inputTip(0, wrongNameHtml, wrongTypeName); 
inputTip(1, wrongPwdHtml, wrongTypePwd); 

if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用户输入信息完全合法的情况下，即数组下标全部为0 开始执行ajax验证 
//alert($.cookie("logout")); 
if(editPass){ 
pwd = $.md5(pwd); 
} 
$("#passwd").val(pwd); 
$("#login-form input").attr('disabled', true); 
$('.remember').unbind('click'); 
//已经向服务器提交了信息，所以将页面上的所有输入框按钮设置成不可用状态，这样可以有效的避免重复提交 
var remb = $('#remember-long').val(); 
ajaxCheck(uname, pwd, remb); 
} 
}); 

变化在33行和41行，

行用来判断密码是用户在程序内部退出到登录页面的时候是自行输入还是从cookies中读取的。防止二次加密造成服务器验证失败。

行主要是将ajax处理过程提取出来，同时加入了服务器验证成功之后的记住密码和取消记住密码的操作，方便阅读：

复制代码代码如下:

 
var ajaxCheck = function (uname, pwd, remb) { 
$(".btn-master").addClass("visibility"); 
var $params = "user_name=" + decodeURI(uname) + "&user_pwd=" + decodeURI(pwd) + "&remember=" + decodeURI(remb); 
$.ajax({ 
type: 'POST', 
url: 'CheckUserLogin.aspx', 
//async: false, 
cache: false, 
dataType: 'json' 
data: $params, 
success: function (data, status) { 
wrongTypeName = data.wrongTypeName; 
wrongTypePwd = data.wrongTypePwd; 
var loginSuccess = data.loginSuccess; //获取服务器返回的json数据 
if (loginSuccess == 0) { 
if ($('#remember-long').val() == 1) {//记住密码 
$.cookie('UserName', uname, { expires: 7, path: '/' }); 
$.cookie('Password', pwd, { expires: 7, path: '/' }); 
} 
else if ($('#remember-long').val() == 0) {//取消记住的密码，或者没有记住密码 
$.cookie('UserName', null,{ expires: 7, path: '/' }); 
$.cookie('Password', null,{ expires: 7, path: '/' }); 
} 
location.href = "/Members/Members.html" 
} 
else { 
$(".btn-master").removeClass("visibility"); 
$("#login-form input").attr('disabled', false); 
inputTip(0, wrongNameHtml, wrongTypeName); 
inputTip(1, wrongPwdHtml, wrongTypePwd); 
} 
}, 
error: function () { 
wrongTypeName = 5; 
inputTip(0, wrongNameHtml, wrongTypeName); 
$("#login-form input").attr('disabled', false); 
$('.remember').bind('click', function () { checkClick(); }); 
$(".btn-master").removeClass("visibility"); 
} 
}) 
} 

页面初始化的时候要对记住密码这个过程进行处理：

复制代码代码如下:

 
var rememberPassword = function (logout) {//页面加载完成之后执行自动登录检查 
var ckname = $.cookie('UserName'); 
var ckpwd = $.cookie("Password"); 
if (ckname != "" && ckpwd != "" && ckname != null && ckpwd != null) { 
$('#remember-long').val("1") 
$('#remember-long').attr('checked', true); 
$("#uname").val(ckname); //用户名 
$('.reg-item').addClass('focus'); 
if (logout=="safe"){ 
$.cookie("logout","",{ expires: 1, path: '/' }) 
} 
else{ 
$("#passwd").val(ckpwd); //用户密码 
$(".btn-submit").trigger('click'); //自动登录 
} 
} 
else { 
$('#remember-long').val("0") 
$('#remember-long').attr('checked', false); 
} 
} 

var logout = $.cookie("logout"); 
　　　　//判断用户是否是从内部退出还是直接打开 
//如果是从内部退出，那么就不能再次自动登录进去，除非用户刷新了页面 
rememberPassword(logout); 

下面是完整的全新的前端脚本：

复制代码代码如下:

$(function () {

var wrongTypeName, //用户名的错误类型，可以直接作为错误提示信息数组的下标
wrongTypePwd, //用户密码的错误类型
wrongNameHtml = new Array("", "请输入用户名", "用户名长度太短", "用户名长度超过12位", "您的用户名或密码错误", "超时，请重新登陆"),
wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中含有非法字符"),
editPass=false;

$('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($(this).attr("id")=="passwd"){
editPass = true;
}
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 () {
wrongTypeName = 0;
wrongTypePwd = 0;
var uname = $("#uname").val(), //用户名
pwd = $("#passwd").val(), //用户密码
plength = pwd.length,
nlength = uname.length; //长度
if (nlength == 0)
wrongTypeName = 1;
if (nlength > 0 && nlength wrongTypeName = 2;
if (nlength > 20)
wrongTypeName = 3;
if (plength == 0)
wrongTypePwd = 1; //这里是对用户名和密码长度的一个判断，并获取错误信息数组的下标。
else {
var patrn = /^(\w){6,20}$/;
if (plength wrongTypePwd = 2;
if (plength > 50)
wrongTypePwd = 3;
if (plength > 6 && plength if (!patrn.exec(pwd))
wrongTypePwd = 4; //这里是对用户密码合法性的前端判断，并返回错误数组的下标
}
}

inputTip(0, wrongNameHtml, wrongTypeName);
inputTip(1, wrongPwdHtml, wrongTypePwd);

if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用户输入信息完全合法的情况下，即数组下标全部为0 开始执行ajax验证
//alert($.cookie("logout"));
if(editPass){
pwd = $.md5(pwd);
}
$("#passwd").val(pwd);
$("#login-form input").attr('disabled', true);
$('.remember').unbind('click');
//已经向服务器提交了信息，所以将页面上的所有输入框按钮设置成不可用状态，这样可以有效的避免重复提交
var remb = $('#remember-long').val();
ajaxCheck(uname, pwd, remb);
}
});

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()

var ajaxCheck = function (uname, pwd, remb) {
$(".btn-master").addClass("visibility");
var $params = "user_name=" + decodeURI(uname) + "&user_pwd=" + decodeURI(pwd) + "&remember=" + decodeURI(remb);
$.ajax({
type: 'POST',
url: 'CheckUserLogin.aspx',
//async: false,
cache: false,
dataType: 'json',
data: $params,
success: function (data, status) {
wrongTypeName = data.wrongTypeName;
wrongTypePwd = data.wrongTypePwd;
var loginSuccess = data.loginSuccess; //获取服务器返回的json数据
if (loginSuccess == 0) {
if ($('#remember-long').val() == 1) {//记住密码
$.cookie('UserName', uname, { expires: 7, path: '/' });
$.cookie('Password', pwd, { expires: 7, path: '/' });
}
else if ($('#remember-long').val() == 0) {//取消记住的密码，或者没有记住密码
$.cookie('UserName', null,{ expires: 7, path: '/' });
$.cookie('Password', null,{ expires: 7, path: '/' });
}
location.href = "/Members/Members.html"
}
else {
$(".btn-master").removeClass("visibility");
$("#login-form input").attr('disabled', false);
inputTip(0, wrongNameHtml, wrongTypeName);
inputTip(1, wrongPwdHtml, wrongTypePwd);
}
},
error: function () {
wrongTypeName = 5;
inputTip(0, wrongNameHtml, wrongTypeName);
$("#login-form input").attr('disabled', false);
$('.remember').bind('click', function () { checkClick(); });
$(".btn-master").removeClass("visibility");
}
})
}

var checkClick = function () {
if ($('#remember-long').attr('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点击的绑定。

if ($.browser.msie && $.browser.version == "6.0") {
//帮助微软消灭ie6
if ($.cookie('masterShow') != "hidden")
$('body').append('

您的浏览器是IE6.0，漏洞较多，用户体验较差，微软官方将要放弃支持，为了自身电脑安全和获取最佳用户体验建议你根据自身需求升级至IE8.0以上版本或者使用火狐浏览器

关闭

不再显示

');
$(".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');
});
});
}

var rememberPassword = function (logout) {//页面加载完成之后执行自动登录检查
var ckname = $.cookie('UserName');
var ckpwd = $.cookie("Password");
if (ckname != "" && ckpwd != "" && ckname != null && ckpwd != null) {
$('#remember-long').val("1")
$('#remember-long').attr('checked', true);
$("#uname").val(ckname); //用户名
$('.reg-item').addClass('focus');
if (logout=="safe"){
$.cookie("logout","",{ expires: 1, path: '/' })
}
else{
$("#passwd").val(ckpwd); //用户密码
$(".btn-submit").trigger('click'); //自动登录
}
}
else {
$('#remember-long').val("0")
$('#remember-long').attr('checked', false);
}
}

var logout = $.cookie("logout");//判断用户是否是从内部退出
rememberPassword(logout);

$(document).bind('keydown', 'return', function () { $(".btn-submit").trigger('click'); });
})

关于页面中涉及的后台程序，我用了页面级别的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(uname, 30); 

if (Validator.StrIsNullOrEmpty(uname)) 
{ 
wrongTypeName = 1; 
} 
if (Validator.StrIsNullOrEmpty(pwd)) 
{ 
wrongTypePwd = 1; 
} 
if (!string.IsNullOrEmpty(uname) && !string.IsNullOrEmpty(pwd)) 
{ 
//以下使用常量来做演示： 
string userName="ethan.zhu"; 
string password ="";//需要MD5加密之后的字符串 
if (uname==userName&&password==pwd ) 
ht.Add("loginSuccess", 0); 
else 
wrongTypeName = 4;//返回用户名或密码错误 

if (wrongTypeName > 0 || wrongTypePwd > 0) 
{ 
ht.Add("wrongTypeName", wrongTypeName); 
ht.Add("wrongTypePwd", wrongTypePwd); 
} 
Response.Write(CreateJsonParams(ht)); 
} 
Response.End(); 
} 

将Hashtable转换成json：

复制代码代码如下:

 
public static string CreateJsonParams(Hashtable items) 
{ 
string returnStr = ""; 
foreach (DictionaryEntry item in items) 
{ 
returnStr += "\"" + item.Key.ToString() + "\":\"" + item.Value.ToString() + "\","; 
} 
return "{" + returnStr.Substring(0, returnStr.Length - 1) + "}"; 

} 

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

用户体验五要素是什么Aug 26, 2022 pm 05:24 PM

用户体验五要素：1、用户需要，用户和经营者分别想从这个产品中获得什么；2、范围功能，这个产品有哪些功能；3、流程设计，可分为交互设计和信息架构两个大的部分，交互设计描述“可能的用户行为”，信息架构关注如何将信息表达给用户；4、原型设计，决定某个板块或按钮等交互元素应该放在页面的什么地方；5、感知设计，是将内容、功能和美学汇集到一起来产生一个最终设计，从而满足其他层面的所有目标。

刨析Vue的服务器端通信流程：如何提高用户体验Aug 10, 2023 am 11:19 AM

刨析Vue的服务器端通信流程：如何提高用户体验引言：随着互联网的快速发展，客户端与服务器之间的通信变得日益重要。Vue作为一种现代的JavaScript框架，为开发者提供了丰富的工具和技术来实现服务器端通信。本文将深入探讨Vue的服务器端通信流程，并介绍一些提高用户体验的技巧和最佳实践。一、Vue服务器端通信流程概述Vue的服务器端通信流程包括以下几个关键步

PHP SSO单点登录与用户体验的完美结合Oct 15, 2023 am 08:23 AM

PHPSSO单点登录与用户体验的完美结合随着互联网的迅速发展，人们在使用各种网站和应用时需要频繁地注册和登录，不仅浪费了用户的时间和精力，还容易导致用户忘记账号和密码。为了解决这个问题，单点登录（SingleSign-On，简称SSO）技术应运而生。在多个相关网站或应用之间共享用户信息，实现用户在一处登录，在其他应用中免登录访问的便捷性，大大提升了用户的

如何使用CSS3动画功能提升网页性能和用户体验Sep 09, 2023 pm 07:43 PM

如何使用CSS3动画功能提升网页性能和用户体验在如今的互联网时代，网页设计已经成为了人们经常接触的一种艺术形式。而其中，动画效果在网页设计中起到了至关重要的作用，可以为用户呈现出更加生动、丰富的内容，提升用户的使用体验。然而，过多或不适当的动画效果也可能会给网页性能和用户体验带来负面影响。本文将介绍如何使用CSS3动画功能来提升网页性能和用户体验，并附上一些

win8系统为什么用的人比较少的详细介绍Jul 13, 2023 pm 02:57 PM

为什么win8系统很少有人用？许多比较熟悉电脑的用户都知道，Windows操作系统有非常的多，现在连win7、winXP都有许多用户在使用，而win8系统却没人使用，这是因为win8系统相当于一个失败品，拥有着很多缺陷，下面小编就带着大家一起看看吧！Win8系统缺点介绍1、操作逻辑较差，让人难以领会Win8的界面设计和一些按钮的位置是很有问题的，本来采用新设计的win8就增加了用户的学习成本，win8的系统托盘还没了，最小化按钮也特别难找到，这让人觉得win8是个不成熟的产品，是个很麻烦的系统。

win11和win10的比较详细对比Jan 04, 2024 am 11:35 AM

在win11系统正式发布后，它的性能就受到了广大网友的好奇，因为现在大家普遍使用的是win10系统，所以都想知道win11相比win10性能怎么样，有专业人士已经做出了相关测试，下面就跟着小编一起来看看吧。win11和win10哪个好用：答：目前win11好用，刚出现时可能存在bug漏洞，经过一段时间维护漏洞消失了。无论是性能还是界面美化，都可以说完全领先win10系统。win11和win10UI对比：1、win11系统将win10基础上所有的窗口、对话框都进行改变，统统使用圆角UI。2、同时，

改善用户体验的方法：固定定位网页导航栏Jan 20, 2024 am 10:27 AM

固定定位提高网页导航栏的用户体验，需要具体代码示例导航栏作为网页的重要组成部分之一，对于用户的导航和浏览体验起着关键作用。而提升导航栏的用户体验，固定定位是一种常用的方法。本文将介绍如何通过固定定位来提高网页导航栏的用户体验，并提供具体的代码示例。固定定位是指将元素固定在浏览器窗口或父容器的特定位置，即使用户向下滚动页面，该元素也将保持不动。这种技术常用于导

PHP 防抖技术：提升用户体验的重要利器Oct 12, 2023 pm 12:48 PM

PHP防抖技术：提升用户体验的重要利器，需要具体代码示例摘要：在现代网页应用程序中，用户体验是至关重要的。而防抖技术是一种提升用户体验的重要利器，可以有效地减少不必要的请求和提高页面性能。本文将介绍PHP中的防抖技术，并给出几个具体的代码示例。正文：引言随着互联网的普及和发展，网页应用程序在我们的生活中扮演着越来越重要的角色。用户体验是我们开发者需要关注的

See all articles