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

次の操作はデフォルトでクライアントサーバーに設定され、js サポートが有効になります。スクリプトがない場合は、独自のコードを記述して実装してください。

まず、表示画像を貼り付けます:

デフォルトのステータス:

エラーステータス:

待機ステータス:

ワークフロー:

ユーザーがログインして送信する前に、クライアント検証入力ボックスで null 値と長さのみが判断され、サーバーに送信された後、送信された文字列の正当性と長さが自動的に検証され、不正な文字が削除されて返されます。返された正当な文字列に基づいてログイン検証が実行され、処理のために JSON データがフロント デスクに返されます。サーバーがデータを返した後、すべての作業がサーバーに渡されます。処理のためのフロントデスク。

ここではフロントエンドの処理プロセスに焦点を当てます。

まず、ページを開いた後にフォーカスを取得します:

$('body').focus(); これにより、マウスのフォーカスが入力ボックスに表示されなくなります。

次に、2 つの入力ボックスの取得イベントとフォーカス喪失イベントを処理します。

コードをコピーします コードは次のとおりです。 :

$('.reg-action .reg-input').each(function () {
var items = $(this).parent('.reg-item') ;
if ($(this).val()) {
items.addClass("focus")
}
$(this).bind('フォーカスブラー', 関数 (イベント) ) {
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 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");
}
});

}
});


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




コードをコピー

コードは次のとおりです。

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


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




コードをコピー

コードは次のとおりです:

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

Microsoft による IE6.0 の排除に協力

コードをコピー コードは次のとおりです:

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

お使いのブラウザはIE6.0IE8.0 以上、または Firefoxブラウザ

閉じる

');
$(".master").lay(1000).slideDown('', function () {
$(".m-close") .fadeIn();
}) ;
$(".m-close-short").click(function () {
$(".m-close").fadeOut('', function () {
$(" .master").slideUp();
$(".m-close-long"); ) {
$(".m -close").fadeOut('', function () {
$(".master").slideUp();
$.cookie('masterShow', 'hidden');
});
}


このログイン ページは Diandian.com の以前のバージョンのデザインを盗用しています。 Kissy ライブラリを使用して毎回検証のためにサーバーに送り返し、ページ全体を更新するには、jquery の使用に切り替えて ajax 非同期検証を使用し、ログインが繰り返されるのを防ぐために検証プロセス中にページ要素を使用できないように設定しました。
完全なファイル パッケージのダウンロード:

jquery_login.rar

作成者: Ethan.zhu

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：時差計算用JavaScript関数共有_JavaScriptスキル次の記事：時差計算用JavaScript関数共有_JavaScriptスキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル