欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Jquery打造最佳用戶(hù)體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼

 更新時(shí)間:2011年07月08日 13:33:44   作者:  
使用Jquery打造最佳用戶(hù)體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼,改用jquery使用ajax異步驗(yàn)證,并在驗(yàn)證的過(guò)程中將頁(yè)面元素設(shè)置為不可用,防止重復(fù)登錄。

以下操作默認(rèn)客服端以及開(kāi)啟js支持,noscript情況請(qǐng)自行編寫(xiě)代碼實(shí)現(xiàn)

首先貼上展示圖片:

默認(rèn)狀態(tài):

出錯(cuò)狀態(tài):

等待狀態(tài):

工作流程:

在用戶(hù)登錄提交之前,在客戶(hù)端驗(yàn)證輸入框只做空值和長(zhǎng)度判斷,提交到服務(wù)器之后自動(dòng)對(duì)提交來(lái)的字符串進(jìn)行合法性以及長(zhǎng)度的驗(yàn)證并且去除非法字符返回合法的字符串,根據(jù)返回的合法字符串進(jìn)行登錄驗(yàn)證,然后返回json數(shù)據(jù)給前臺(tái)處理,其中登錄成功的標(biāo)記是 loginSuccess=0,服務(wù)器返回?cái)?shù)據(jù)之后所有工作交給前臺(tái)處理。

這里重點(diǎn)介紹前端處理的過(guò)程。

首先在頁(yè)面打開(kāi)之后讓頁(yè)面獲取焦點(diǎn):

$('body').focus();這樣鼠標(biāo)焦點(diǎn)就不會(huì)出現(xiàn)在輸入框內(nèi)。

然后處理兩個(gè)輸入框的獲取和失去焦點(diǎn)的事件:

復(fù)制代碼 代碼如下:

$('.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; //獲取事件類(lèi)型
if (type == 'focus') {
if (items.hasClass('error')) {
$(this).val("");
items.removeClass('error');
}
items.addClass('focus');
} else if (!$(this).val()) {
items.removeClass('focus');
}
})
});

在提交按鈕之后:
復(fù)制代碼 代碼如下:

$(".btn-submit").click(function () {
var wrongTypeName = 0,//用戶(hù)名的錯(cuò)誤類(lèi)型,可以直接作為錯(cuò)誤提示信息數(shù)組的下標(biāo)
wrongTypePwd = 0,//用戶(hù)密碼的錯(cuò)誤類(lèi)型
uname = $("#uname").val(),//用戶(hù)名
pwd = $("#passwd").val(),//用戶(hù)密碼
plength = pwd.length,
nlength = uname.length,//長(zhǎng)度
wrongNameHtml = new Array("", "請(qǐng)輸入用戶(hù)名", "用戶(hù)名長(zhǎng)度太短", "用戶(hù)名長(zhǎng)度超過(guò)12位", "您的用戶(hù)名或密碼錯(cuò)誤", "超時(shí),請(qǐng)重新登陸"),
wrongPwdHtml = new Array("", "請(qǐng)輸入密碼", "密碼長(zhǎng)度小于6位", "密碼長(zhǎng)度超過(guò)20位", "密碼中含有非法字符");
//這里定義的是錯(cuò)誤信息的數(shù)組

if (nlength == 0) {
wrongTypeName = 1;
}
if (nlength > 0 && nlength < 2) {
wrongTypeName = 2;
}
if (nlength > 20) {
wrongTypeName = 3;
}
if (plength == 0) {
wrongTypePwd = 1;//這里是對(duì)用戶(hù)名和密碼長(zhǎng)度的一個(gè)判斷,并獲取錯(cuò)誤信息數(shù)組的下標(biāo)。
} 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;//這里是對(duì)用戶(hù)密碼合法性的前端判斷,并返回錯(cuò)誤數(shù)組的下標(biāo)
}
}

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");
}//定義錯(cuò)誤提示信息頁(yè)面顯示函數(shù)。由于頁(yè)面只有兩個(gè)輸入框所以我這里直接指定了index,如果頁(yè)面上有很多,可以使用$(this).index()

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

if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用戶(hù)輸入信息完全合法的情況下,即數(shù)組下標(biāo)全部為0 開(kāi)始執(zhí)行ajax驗(yàn)證
//$(".reg-input").attr('disabled', true);
$("#login-form input").attr('disabled', true);
$('.remember').unbind('click');
$(".btn-master").addClass("visibility");
//已經(jīng)向服務(wù)器提交了信息,所以將頁(yè)面上的所有輸入框按鈕設(shè)置成不可用狀態(tài),這樣可以有效的避免重復(fù)提交
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;//獲取服務(wù)器返回的json數(shù)據(jù)
//alert(wrongTypeName);
//alert(wrongTypePwd);
if (loginSuccess == 0) {
location.href = "/Members/Memb.html";//成功則直接跳轉(zhuǎn)
} else {//登錄失敗,返回友好的提示信息
$(".btn-master").removeClass("visibility");
$("#login-form input").attr('disabled', false);
inputTip(0, wrongNameHtml, wrongTypeName);
inputTip(1, wrongPwdHtml, wrongTypePwd);
}
});
},
error: function () {//ajax請(qǐng)求錯(cuò)誤的情況返回超時(shí)重試。
wrongTypeName = 5;
inputTip(0, wrongNameHtml, wrongTypeName);
$("#login-form input").attr('disabled', false);
$('.remember').bind('click', function () { checkClick(); });
$(".btn-master").removeClass("visibility");
}
});

}
});

記住密碼的checkbox以及文字的點(diǎn)擊:
復(fù)制代碼 代碼如下:

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點(diǎn)擊的綁定。這里只是寫(xiě)入cookies 未作登錄處理,
//登錄處理的思路是當(dāng)選中的時(shí)候直接讀取cookies中的數(shù)據(jù)提交給后臺(tái)
//由于cookies中記錄的事加密之后的密碼所以要追加password已經(jīng)加密

綁定鍵盤(pán)回車(chē)事件:需要引入:hotkeys插件
復(fù)制代碼 代碼如下:

$(document).bind('keydown', 'return', function(){$(".btn-submit").trigger('click');});
//綁定鍵盤(pán)的回車(chē)事件

幫助微軟消滅IE6.0
復(fù)制代碼 代碼如下:

if ($.browser.msie && $.browser.version == "6.0") {
//幫助微軟消滅ie6
if ($.cookie('masterShow') != "hidden")
$('body').append('<div class="master"><p>您的瀏覽器是<strong>IE6.0</strong>,漏洞較多,用戶(hù)體驗(yàn)較差,微軟官方將要放棄支持,為了自身電腦安全和獲取最佳用戶(hù)體驗(yàn)建議你根據(jù)自身需求升級(jí)至<a target="_blank" class="red"><strong>IE8.0</strong></a>以上版本或者使用<a target="_blank" class="red"><strong>火狐</strong></a>瀏覽器</p></div><div class="m-close m-close-short">關(guān)閉</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');
});
});
}

關(guān)于頁(yè)面,這個(gè)登錄頁(yè)面抄襲了點(diǎn)點(diǎn)網(wǎng)以前一個(gè)版本的設(shè)計(jì),點(diǎn)點(diǎn)使用kissy庫(kù)每次都發(fā)回服務(wù)器驗(yàn)證,整個(gè)頁(yè)面的刷新,我改用jquery使用ajax異步驗(yàn)證,并在驗(yàn)證的過(guò)程中將頁(yè)面元素設(shè)置為不可用,防止重復(fù)登錄。
完整文件打包下載:jquery_login.rar
作者:Ethan.zhu

相關(guān)文章

最新評(píng)論