最高のユーザー エクスペリエンスを作成するための 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

2週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.チャットコマンドとそれらの使用方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7530

15

CakePHP チュートリアル

1378

52

Steamのアカウント名の形式は何ですか

82

11

Win11 Activation Key Permanent

54

19

NYTの接続はヒントと回答です

21

76

もっと見る