最高のユーザー エクスペリエンスを作成するための Jquery を使用したログイン ページの実装コード_jquery

$(".btn-submit").click(function () {
var worstTypeName = 0,//ユーザー名のエラー タイプをエラー メッセージの添え字として直接使用できます。 array
wrongTypePwd = 0,//ユーザー パスワードの種類が間違っています
uname = $("#uname").val(),//Username
pwd = $("#passwd").val( ), //ユーザーパスワード
plength = pwd.length,
nlength = uname.length,//Length
wrongNameHtml = new Array("", "ユーザー名を入力してください", "ユーザー名短すぎます" , "ユーザー名が 12 文字を超えています", "ユーザー名またはパスワードが間違っています", "タイムアウトしました。もう一度ログインしてください"),
wrongPwdHtml = new Array("", "パスワードを入力してください", "パスワードの長さが 6 桁未満です"、"パスワードの長さが 20 桁を超えています"、"パスワードに不正な文字が含まれています");
//ここで定義されているのはエラー メッセージの配列です

if (nlength == 0) {
wrongTypeName = 1;
if (nlength > 0 && nlength wrongTypeName = 2;
if (nlength > 20) {
worstTypeName = 3;
}
if (plength == 0) {
wrongTypePwd = 1;//これはユーザー名とパスワードの長さによる判断です、エラー メッセージ配列の添字を取得します } else {
var patrn = /^(w){6,20}$/;
if (plength wrongTypePwd = 2;
if (plength > 20)
wrongTypePwd = 3;
if (plength > 6 && plength 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");エラーメッセージページ表示機能。ページには入力ボックスが 2 つしかないため、ページに入力ボックスが多数ある場合は、$(this).index()

inputTip(0,wrongNameHtml,wrongTypeName) を使用できます。 );
inputTip (1, worstPwdHtml, worstTypePwd);

if (wrongTypePwd == 0 && worstTypeName == 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');
//alert($params);
url: "CheckUserLogin.aspx",
data: $params,
dataType: "json" 、
成功: function (data) {
$(data).each(function (te, u) {
wrongTypeName = u.wrongTypeName;
wrongTypePwd = u .wrongTypePwd;
varloginSuccess = u.loginSuccess;//サーバーから返された json データを取得します
//alert(wrongTypePwd); = 0) {
location. href = "/Members/Memb.html";//成功した場合は直接ジャンプします
} else {//ログインに失敗した場合は、わかりやすいプロンプト メッセージを返します
$(". btn-master").removeClass(" Visibility");
$("#login-form input").attr('disabled', false);
inputTip(0, 間違ったNameHtml, 間違ったTypeName);
inputTip(1, 間違ったPwdHtml, 間違ったタイプPwd) ;
}
});
},
error: function () {//ajax リクエストエラーが発生した場合は、タイムアウトが返され、再試行されます。
間違ったタイプ名 = 5;
inputTip(0, 間違った名前Html, 間違ったタイプ名);
$("#ログインフォーム入力").attr('無効',
$('.remember); ').bind('click', function () { checkClick(); });
$(".btn-master").removeClass("visibility");
}
});

}
});


パスワードを保存するチェックボックスとテキスト クリック:




コードをコピー

$('#remember-long').attr('checked', true);
$('#remember-long').val("1")
}
}
$('.remember').bind('click', function () { checkClick(); });
$("#remember-long").click(function () { checkClick() });
//ログインチェックボックスとラベルクリックのバインディングを記憶します。ここでは、ログイン処理を行わずに Cookie のみを書き込みます。
//ログイン処理のアイデアは、Cookie 内のデータを直接読み取り、選択時にバックグラウンドに送信することです。暗号化されています。パスワードを追加するには暗号化されています


バインド キーボード Enter イベント: 導入する必要があります: ホットキー プラグイン




コードをコピー

$(document).bind('keydown', 'return', function(){$(".btn-submit").trigger('click');});
//キーボードの Enter イベントをバインドします

if ($.browser.msie && $.browser.version == "6.0") {
//Microsoft が ie6 を排除するのを支援します
if ($.browser.msie && $.browser.version == "6.0") cookie('masterShow ') != "hidden")
$('body').append('