澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-09-17 08:52 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

含后台代码,使用Jquery打造最佳用户体验的登录

亟待引进插件jquery.md5.js
可一贯在IIS下运营;
用户名:Ethan.zhu
密 码:123456789
总体文件下载:WebApplication1_jb51.rar

以下操作暗中认可客服端以及开启js扶助,noscript意况请自行编排代码实现

首先将开关单击事件的异步验证提抽取来作为二个单身的函数,要求将按键单击事件之中的变量提抽取来定义为全局变量,何况扩张二个变量editPass(用来标志是和睦输入密码,依旧从cookies中读取的密码)

首先贴上显得图片:

复制代码 代码如下:

暗许状态:

var wrongTypeName, //客商名的荒唐类型,能够间接当做不当提醒音信数组的下标
wrongTypePwd, //用户密码的错误类型
wrongNameHtml = new Array("", "请输入顾客名", "客商名长度太短", "客商名长度超越11人", "您的客户名或密码错误", "超时,请重新登录"),
wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中富含不法字符"),
editPass=false;

图片 1

那边从上一篇的开关单击事件最初:

出错状态:

复制代码 代码如下:

图片 2

$(".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 < 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 > 50)
wrongTypePwd = 3;
if (plength > 6 && plength < 20) {
if (!patrn.exec(pwd))
wrongTypePwd = 4; //这里是对客商密码合法性的前端剖断,并回到错误数组的下标
}
}

等候情状:

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

图片 3

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行,

在顾客登入提交在此之前,在客商端验证输入框只做空值和长度剖断,提交到服务器之后自动对交付来的字符串进行合法性以及长度的验证何况去除不合规字符重回合法的字符串,依据再次来到的合法字符串实行登录验证,然后回来json数据给前台管理,个中登陆成功的标识是 loginSuccess=0,服务器再次回到数据现在全体专业交给前台处理。

行用来推断密码是顾客在程序内部退出到登入页面的时候是活动输入照旧从cookies中读取的。防止二回加密变成服务器验证失利。

这里根本介绍前端处理的进度。

行重若是将ajax管理进程提抽取来,同一时间加入了服务器验证成功之后的难忘密码和撤销记住密码的操作,方便阅读:

第一在页面展开之后让页面得到关节:

复制代码 代码如下:

$('body').focus();那样鼠标主题就不会冒出在输入框内。

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");
}
})
}

然后管理八个输入框的获得和失去大旨的事件:

页面开头化的时候要对记住密码那么些进度举行拍卖:

复制代码 代码如下:

复制代码 代码如下:

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

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

复制代码 代码如下:

上面是全体的斩新的前端脚本:

$(".btn-submit").click(function () {
var wrongTypeName = 0,//客户名的一无所能类型,能够直接当做不当提醒音讯数组的下标
wrongTypePwd = 0,//客户密码的荒唐类型
uname = $("#uname").val(),//用户名
pwd = $("#passwd").val(),//顾客密码
plength = pwd.length,
nlength = uname.length,//长度
wrongNameHtml = new Array("", "请输入客商名", "顾客名长度太短", "顾客名长度当先11人", "您的客户名或密码错误", "超时,请重新登入"),
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;//这里是对顾客密码合法性的前端推断,并赶回错误数组的下标
}
}

$(function () {

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 wrongTypeName, //顾客名的错误类型,能够一直作为不当提醒音信数组的下标
wrongTypePwd, //顾客密码的谬误类型
wrongNameHtml = new Array("", "请输入客商名", "顾客名长度太短", "客商名长度超越12个人", "您的客户名或密码错误", "超时,请重新登录"),
wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中蕴藏不法字符"),
editPass=false;

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

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:含后台代码,使用Jquery打造最佳用户体验的登录

关键词: 澳门威利斯人