使用Jquery打造最佳使用者體驗的登入頁面的實現代碼

以下操作預設客服端以及開啟js支援，noscript情況請自行編寫代碼實現

首先貼上展示圖片：

預設狀態：

出錯狀態：

等待狀態：

工作流程：

在使用者登入提交之前，在用戶端驗證輸入框只做空值和長度判斷，提交到伺服器之後自動對提交來的字串進行合法性以及長度的驗證並且去除非法字元返回合法的字串，根據返回的合法字串進行登入驗證，然後返回json資料給前台處理，其中登入成功的標記是 loginSuccess=0，伺服器返回資料之後所有工作交給前台處理。

這裡重點介紹前端處理的過程。

首先在頁面開啟之後讓頁面擷取焦點：

$('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 (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 () {
var wrongTypeName = 0,//使用者名稱的錯誤類型，可以直接作為錯誤提示資訊數組的下標
wrongTypePwd = 0,//使用者密碼的錯誤類型
uname = $("#uname").val(),//使用者名稱
pwd = $("#passwd").val(),//使用者密碼
plength = pwd.length,
nlength = uname.length,//長度
wrongNameHtml = new Array("", "請輸入使用者名稱", "使用者名稱長度太短", "使用者名稱長度超過12位", "您的使用者名稱或密碼錯誤", "逾時，請重新登陸"),
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;//這裡是對使用者密碼合法性的前端判斷，並返回錯誤數組的下標
}
}

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

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

if (wrongTypePwd == 0 && wrongTypeName == 0) {//在使用者輸入資訊完全合法的情況下，即數組下標全部為0 開始執行ajax驗證
//$(".reg-input").attr('disabled', true);
$("#login-form input").attr('disabled', true);
$('.remember').unbind('click');
$(".btn-master").addClass("visibility");
//已經向伺服器提交了資訊，所以將頁面上的所有輸入框按鈕設定成不可用狀態，這樣可以有效避免重複提交
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;//擷取伺服器返回的json資料
//alert(wrongTypeName);
//alert(wrongTypePwd);
if (loginSuccess == 0) {
location.href = "/Members/Memb.html";//成功則直接跳轉
} else {//登入失敗，返回友好的提示資訊
$(".btn-master").removeClass("visibility");
$("#login-form input").attr('disabled', false);
inputTip(0, wrongNameHtml, wrongTypeName);
inputTip(1, wrongPwdHtml, wrongTypePwd);
}
});
},
error: function () {//ajax請求錯誤的情況返回逾時重試。
wrongTypeName = 5;
inputTip(0, wrongNameHtml, wrongTypeName);
$("#login-form input").attr('disabled', false);
$('.remember').bind('click', function () { checkClick(); });
$(".btn-master").removeClass("visibility");
}
});

}
});

記住密碼的checkbox以及文字的點擊：
複製代碼 代碼如下:
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點擊的綁定。這裡只是寫入cookies 未作登入處理，
//登入處理的思路是當選中的時候直接讀取cookies中的資料提交給後台
//由於cookies中記錄的事加密之後的密碼所以要追加password已經加密

綁定鍵盤迴車事件：需要引入：hotkeys外掛程式
複製代碼 代碼如下:
$(document).bind('keydown', 'return', function(){$(".btn-submit").trigger('click');});
//綁定鍵盤的斷行符號事件

協助微軟消滅IE6.0
複製代碼 代碼如下:
if ($.browser.msie && $.browser.version == "6.0") {
//協助微軟消滅ie6
if ($.cookie('masterShow') != "hidden")
$('body').append('<div class="master"><p>您的瀏覽器是<strong>IE6.0</strong>，漏洞較多，使用者體驗較差，微軟官方將要放棄支援，為了自身電腦安全和擷取最佳使用者體驗建議你根據自身需求升級至<a href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8" target="_blank" class="red"><strong>IE8.0</strong></a>以上版本或者使用<a href="http://firefox.com.cn/" target="_blank" class="red"><strong>Firefox</strong></a>瀏覽器</p></div><div class="m-close m-close-short">關閉</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');
});
});
}

關於頁面，這個登入頁面抄襲了點點網以前一個版本的設計，點點使用kissy庫每次都發回伺服器驗證，整個頁面的重新整理，我改用jquery使用ajax非同步驗證，並在驗證的過程中將頁面元素設定為不可用，防止重複登入。
完整檔案打包下載：jquery_login.rar
作者:Ethan.zhu