Jquery を使用して、最高のユーザー エクスペリエンスを備えたログイン ページを構築し、パスワードを記憶する自動ログイン機能 (バックグラウンド コードを含む)_jquery

プラグイン jquery.md5.js を導入する必要があります
IIS で直接実行できます。
ユーザー名: Ethan.zhu
パスワード: 123456789
完全なファイルのダウンロード: WebApplication1_jb51.rar

まず、ボタンクリックイベントの非同期検証を別関数として抽出します。ボタンクリックイベント内の変数を抽出してグローバル変数として定義し、変数 editPass (使用) を追加する必要があります。自分で入力にマークを付けるため) パスワード、または Cookie から読み取ったパスワード)

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

var worstTypeName, //間違ったタイプのユーザー名はエラー メッセージ配列の添字として直接使用できます
wrongTypePwd, //間違ったタイプのユーザー パスワード
wrongNameHtml = new Array("", "ユーザー名を入力してください", "ユーザー名が短すぎます", "ユーザー名が 12 文字を超えています", "ユーザー名またはパスワードが間違っています", "タイムアウトしました。もう一度ログインしてください"),
wrongPwdHtml = new Array("", "パスワードを入力してください", "パスワードの長さが 6 文字未満です", "", "パスワードに不正な文字が含まれています"),
editPass=false; 🎜>前の記事のボタンクリックイベントから開始します:

コードをコピー コードは次のとおりです: $(".btn-submit").click (function () {

wrongTypeName = 0;

wrongTypePwd = 0;
var uname = $("#uname").val( ), //ユーザー名
pwd = $("# passwd").val(), //ユーザーパスワード
plength = pwd.length,
nlength = uname.length
; if (nlength == 0)
間違ったタイプ名 = 1;
if (nlength > 0 && nlength 間違ったタイプ名 = 2;
if (nlength > 20)
間違ったタイプ名= 3;
if (plength == 0)
wrongTypePwd = 1; //ここでユーザー名とパスワードの長さを判定し、エラーメッセージ配列の添字を取得します。
else {
var patrn = /^(w){6,20}$/;
if (plength wrongTypePwd = 2
if (plength > 50) )
wrongTypePwd = 3;
if (plength > 6 && plength if (!patrn.exec(pwd))
wrongTypePwd = 4; user フロントエンドはパスワードの有効性を判断し、エラー配列の添字を返します。 , lowerTypePwd);

if (wrongTypePwd == 0 && worstTypeName == 0) {//ユーザー入力情報が完全に正しい場合、つまり配列の添字がすべて 0 の場合、ajax 検証の実行を開始します
//alert($.cookie("logout"));
if(editPass){
pwd = $.md5(pwd);
$("#passwd"); (pwd);
$("#ログインフォーム入力").attr('disabled', true);
$('.remember').unbind('click');情報はサーバーに送信されているため、ページ上のすべての入力ボックスのボタンを無効な状態に設定します。これにより、繰り返しの送信を効果的に回避できます。
var remb = $('#remember-long').val(); 🎜>ajaxCheck(uname, pwd, remb);
}
});


は 33 行目と 41 行目で変更されます。パスワードは、ユーザーがプログラム内で終了するときに使用するパスワードです。ページにログインするときに自分で入力しますか、それとも Cookie から読み取りますか?二次暗号化によってサーバー検証が失敗するのを防ぎます。

行は主に ajax 処理プロセスを抽出し、さらにパスワードを記憶する操作と、サーバー検証が成功した後のパスワードの記憶をキャンセルする操作を追加して、読みやすくしています:




コードをコピー

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

var ajaxCheck = function (uname, pwd, remb) {
$(".btn-master").addClass("visibility");
var $params = "user_name=" decodeURI (uname) "&user_pwd=" decodeURI(pwd) "&remember=" decodeURI(remb);
$.ajax({
type: 'POST',
url: 'CheckUserLogin.aspx',
//async: false,
cache: false,
dataType: 'json'
data: $params,
success: function (data, status) {
wrongTypeName = data.wrongTypeName ;
wrongTypePwd = data.wrongTypePwd;
var loginSuccess = data.loginSuccess; //サーバーから返された json データを取得します
if (loginSuccess == 0) {
if ($('# remember-long').val() == 1) {//パスワードを記憶
$.cookie('UserName', uname, { 有効期限: 7, パス: '/' }); ( 'パスワード', pwd, { 有効期限: 7, パス: '/' });
}
else if ($('#remember-long').val() == 0) {//キャンセル パスワードが記憶されているか、パスワードが記憶されていません
$.cookie('UserName', null,{ 有効期限: 7, パス: '/' });
$.cookie('パスワード', null,{ 有効期限: 7、パス: '/' });
}
location.href = "/Members/Members.html"
}
else {
$(".btn-master ") .removeClass("可視性");
$("#ログインフォーム入力").attr('無効', false);
inputTip(0, 間違った名前Html, 間違ったタイプ名);間違ったPwdHtml、間違ったタイプPwd);
}
}、
エラー: function () {
間違ったタイプ名 = 5;
inputTip(0, 間違った名前Html, 間違ったタイプ名); -form input").attr('disabled', false);
$('.remember').bind('click', function () { checkClick(); });
$( ". btn-master").removeClass("visibility");
}
})
}


ページの初期化時に、パスワードを記憶するプロセスが処理される必要があります：

コードをコピー コードは次のとおりです。 var rememberPassword = function (logout) { //ページ読み込み後、自動ログインチェックを実行します

var ckname = $.cookie('UserName');

var ckpwd = $.cookie("Password");
if (ckname != "" && ckpwd ! = "" && ckname != null && ckpwd != null) {
$('#remember-long').val("1")
$('#remember-long'). attr(' チェック済み', true);
$("#uname").val(ckname); //ユーザー名
$('.reg-item').addClass('focus'); >if (logout=="safe"){
$.cookie("logout","",{ 有効期限: 1, パス: '/' })
}
else{
$ (" #passwd").val(ckpwd); //ユーザーパスワード
$(".btn-submit").trigger('click'); //自動ログイン
}
}
else {
$('#remember-long').val("0")
$('#remember-long').attr('checked', false);
>}

var logout = $.cookie("logout");
//ユーザーが内部からログアウトするか、直接開くかを決定します
//ユーザーが内部からログアウトする場合ユーザーがページを更新しない限り、再度自動的にログインすることはできません。
rememberPassword(logout);


完全な新しいフロントエンド スクリプトです:

コードをコピー

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

$(function () {

var worstTypeName, //エラー メッセージ配列の添え字として直接使用できる、間違ったタイプのユーザー名です。
wrongTypePwd, / /ユーザーのパスワードが間違っています Type
wrongNameHtml = new Array("", "ユーザー名を入力してください", "ユーザー名が短すぎます", "ユーザー名が 12 文字を超えています", "あなたのユーザー名またはパスワードが間違っています", "タイムアウトしました。もう一度ログインしてください"),
wrongPwdHtml = new Array("", "パスワードを入力してください", "パスワードの長さは 6 文字未満です", "", "パスワードに不正な文字列が含まれています文字"),
editPass=false;

$('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; //Getイベントタイプ
if($(this).attr ("id")=="passwd"){
editPass = true;
}
if (type == 'focus') {
if (items.hasClass('error')) {
$(this).val("");
items.removeClass('error'); addClass('focus');
} else if ( !$(this).val()) {
items.removeClass('focus');
}
} );

$(".btn-submit").click(function () {
wrongTypeName = 0;
wrongTypePwd = 0;
var uname = $("#uname" ).val(), //ユーザー名
pwd = $("#passwd").val(), //ユーザーパスワード
plength = pwd.length,
nlength = uname.length;長さ
if (nlength == 0)
wrongTypeName = 1;
if (nlength > 0 && nlength wrongTypeName = 2;
wrongTypeName = 3;
if (plength == 0)
wrongTypePwd = 1; //ここでユーザー名とパスワードの長さを判定し、エラーメッセージ配列の添え字を取得します。
else {
var patrn = /^(w){6,20}$/;
if (plength wrongTypePwd = 2
if (plength > 50) )
wrongTypePwd = 3;
if (plength > 6 && plength if (!patrn.exec(pwd))
wrongTypePwd = 4; user フロントエンドはパスワードの有効性を判断し、エラー配列の添字を返します。 , lowerTypePwd);

if (wrongTypePwd == 0 && worstTypeName == 0) {//ユーザー入力情報が完全に正しい場合、つまり配列の添字がすべて 0 の場合、ajax 検証の実行を開始します
//alert($.cookie("logout"));
if(editPass){
pwd = $.md5(pwd);
$("#passwd"); (pwd);
$("#ログインフォーム入力").attr('disabled', true);
$('.remember').unbind('click');情報はサーバーに送信されているため、ページ上のすべての入力ボックスのボタンを無効な状態に設定します。これにより、繰り返しの送信を効果的に回避できます。
var remb = $('#remember-long').val(); 🎜>ajaxCheck(uname, pwd, remb);
}
});

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

var ajaxCheck = function (uname, pwd, remb) {
$(".btn-master").addClass("visibility");
var $params = "user_name=" decodeURI(uname) "&user_pwd=" decodeURI(pwd) "&remember =" decodeURI(remb) ;
$.ajax({
type: 'POST',
url: 'CheckUserLogin.aspx',
//async: false,
cache: false ,
dataType: 'json',
data: $params,
success: function (data, status) {
wrongTypeName = data.wrongTypeName;
wrongTypePwd = data.wrongTypePwd; >var loginSuccess = data.loginSuccess; //サーバーから返された json データを取得します
if (loginSuccess == 0) {
if ($('#remember-long').val() == 1 ) {//パスワードを記憶します
$.cookie('UserName', uname, { 有効期限: 7, パス: '/' });
$.cookie('Password', pwd, { 有効期限: 7, path: '/' }) ;
}
else if ($('#remember-long').val() == 0) {//記憶されたパスワードをキャンセルするか、パスワードを記憶しない
$.cookie(' ユーザー名', null,{ 有効期限: 7, パス: '/' });
$.cookie('パスワード', null,{ 有効期限: 7, パス: '/' }) ;
}
location.href = "/Members/Members.html"
}
else {
$(".btn-master").removeClass("visibility"); 🎜>$("#login -form input").attr('disabled', false);
inputTip(0, 間違った名前Html, 間違ったタイプ名);
inputTip(1, 間違ったPwdHtml, 間違ったTypePwd);
},
error: function () {
間違ったタイプ名 = 5;
inputTip(0, 間違った名前Html, 間違ったタイプ名);
$("#ログインフォーム入力");無効', false);
$('.remember').bind('click', function () { checkClick(); });
$(".btn-master").removeClass("可視性");
}
})
}

var checkClick = function () {
if ($('#remember-long').attr('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 (); });
//ログインチェックボックスとラベルのクリックのバインディングを記憶します。

if ($.browser.msie && $.browser.version == "6.0") {
//Microsoft による ie6 の廃止に協力します
if ($.cookie('masterShow') != "hidden")
$('body').append('

お使いのブラウザは IE6.0 です、脆弱性は比較的多すぎるとユーザー エクスペリエンスが低下し、Microsoft 公式はサポートを放棄します。ご使用のコンピューターのセキュリティと最高のユーザー エクスペリエンスを得るために、IE8.0またはまたは、Firefoxブラウザ

を使用してください。

閉じる

今後表示しない');
$(".master").lay(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');
});
});
}

var rememberPassword = function (logout) {//ページのロード後に自動ログインチェックを実行します
var ckname = $.cookie('ユーザー名');
var ckpwd = $.cookie("パスワード");
if (ckname != "" && ckpwd != "" && ckname != null && ckpwd != null) {
$('#remember-long' ).val("1")
$('#remember-long').attr('checked', true);
$("#uname").val (ckname); // ユーザー名
$('.reg-item').addClass('focus');
if (logout=="safe"){
$.cookie("logout") ,"",{ 有効期限: 1, パス: '/' })
}
else{
$("#passwd").val(ckpwd); //ユーザーパスワード
$( ".btn-submit") .trigger('click'); //自動ログイン
}
}
else {
$('#remember-long').val("0" )
$(' #remember-long').attr('checked', false);
}
}

var logout = $.cookie("logout");/ /ユーザーが内部からのものであるかどうかを判断する Exit
rememberPassword(logout)

$(document).bind('keydown', 'return', function () { $(".btn-submit") ).trigger('click') ; });
})


ページに関係するバックグラウンド プログラムに関しては、ページ レベルの aspx を使用しましたが、もちろん、ashx を使用することもできます。それを処理してください。このバックグラウンド処理は、パスワードが正しいかどうかを検証し、ユーザーが正しくログインしている場合はセッション値を設定します。必要に応じて、バックグラウンドで定数を定義して検証の判断を行うことができます:

コードをコピー

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

Hashtable ht = new Hashtable();
string uname = Request.Params["user_name"];
string pwd = Request.Params["user_pwd"]; 0;
int lowerTypePwd = 0;
uname = PageValidate.InputText(uname, 30);

if (Validator.StrIsNullOrEmpty(uname))
{
wrongTypeName = 1;
}
if (Validator.StrIsNullOrEmpty(pwd))
{
wrongTypePwd = 1;
}
if (!string.IsNullOrEmpty(uname) && !string.IsNullOrEmpty(pwd) ))
{
//次の定数はデモンストレーションに使用されます:
string userName="ethan.zhu";
string password="";//MD5 暗号化後の文字列が必要です
if (uname==userName&&password==pwd )
ht.Add("loginSuccess", 0);
else
wrongTypeName = 4;//ユーザー名またはパスワードのエラーを返します

if (間違ったタイプ名 > 0 || 間違ったタイプPwd > 0)
{
ht.Add("間違ったタイプ名", 間違ったタイプ名);
ht.Add("間違ったタイプPwd", 間違ったタイプPwd); 🎜>Response.Write(CreateJsonParams(ht));
}
Response.End();
}


ハッシュテーブルを json に変換します:

コードをコピーします コードは次のとおりです: public static string CreateJsonParams(Hashtable items)

{

string returnStr = "";
foreach (項目内の DictionaryEntry 項目)
{
returnStr = """ item.Key.ToString() "":"" item.Value.ToString() ""," ;
}
return "{" returnStr.Substring(0, returnStr.Length - 1) "}";

}