Jquery를 사용하여 최고의 사용자 경험을 갖춘 로그인 페이지를 구축하고 비밀번호 자동 로그인 기능을 기억하세요(백그라운드 코드 포함)

플러그인 jquery.md5.js를 도입해야 합니다.
IIS에서 직접 실행할 수 있습니다.
사용자 이름: Ethan.zhu
비밀번호: 123456789
전체 파일 다운로드: WebApplication1_jb51.rar

먼저 버튼 클릭 이벤트의 비동기 검증을 별도의 함수로 추출하고, 버튼 클릭 이벤트의 변수를 추출하여 전역 변수로 정의한 후 editPass(사용) 변수를 추가해야 합니다. 입력을 직접 표시하려면) 비밀번호 또는 쿠키에서 읽은 비밀번호)

코드 복사 코드는 다음과 같습니다.

 
varwrongTypeName, //잘못된 유형의 사용자 이름은 오류 메시지 배열의 첨자로 직접 사용될 수 있습니다.
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) 
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 > 50; ) 
wrongTypePwd = 3; 
if (plength > 6 && plength < 20) { 
if (!patrn.exec(pwd)) 
wrongTypePwd = 4; user 프런트 엔드는 비밀번호의 유효성을 판단하고 오류 배열 
} 
} 

inputTip(0,wrongNameHtml,wrongTypeName)
inputTip(1,wrongPwdHtml)의 첨자를 반환합니다. ,wrongTypePwd); if (wrongTypePwd == 0 &&wrongTypeName == 0) {//사용자 입력 정보가 ​​완전히 합법적인 경우, 즉 모든 배열 첨자가 0인 경우 Ajax 검증을 시작합니다
 //alert($.cookie("logout")); 
if(editPass){ 
pwd = $.md5(pwd) 
} 
$("#passwd").val (pwd); 
$("#login-form input").attr('disabled', true) 
$('.remember').unbind('click'); 정보가 서버에 제출되었으므로 페이지의 모든 입력 상자 버튼을 비활성화 상태로 설정하면 반복 제출을 효과적으로 방지할 수 있습니다. 
var remb = $('#remember-long').val() 
ajaxCheck(uname, pwd, remb); 
} 
}) 

 
 33행과 41행의 변경. 

행은 비밀번호는 사용자가 프로그램 내에서 종료하는 비밀번호입니다. 페이지에 로그인할 때 비밀번호를 직접 입력하시나요, 아니면 쿠키에서 읽으시나요? 보조 암호화로 인해 서버 확인이 실패하는 것을 방지합니다.

라인은 주로 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, 
캐시: 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 ( '비밀번호', 비밀번호, { 만료: 7, 경로: '/' }) 
} 
else if ($('#remember-long').val() == 0) {// 취소 기억된 비밀번호 또는 비밀번호가 기억되지 않음 
$.cookie('UserName', null,{ 만료: 7, 경로: '/' }) 
$.cookie('Password', null,{ 만료: 7, 경로: '/' }); 
} 
location.href = "/Members/Members.html" 
} 
else { 
$(".btn-master ") .removeClass("visibility"); 
$("#login-form input").attr('disabled', false) 
inputTip(0,wrongNameHtml,wrongTypeName); wrongPwdHtml,wrongTypePwd) 
} 
}, 
오류: function () { 
wrongTypeName = 5; 
inputTip(0,wrongNameHtml,wrongTypeName); -양식 입력").attr('disabled', false); 
$('.remember').bind('click', function () { checkClick(); }); 
$( ". btn-master").removeClass("visibility"); 
} 
}) 
} 

 
페이지 초기화 시 비밀번호를 기억하는 과정을 거쳐야 합니다. ： 

코드 복사 코드는 다음과 같습니다.

var RememberPassword = function(로그아웃) { //페이지 로딩 후 자동 로그인 확인

var ckpwd = $.cookie("Password") 
if (ckname != "" && ckpwd ! = "" && ckname != null && ckpwd != null) { 
$('#remember-long').val("1") 
$('#remember-long'). attr(' selected', 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 () {

varwrongTypeName, //오류 메시지 배열의 첨자로 직접 사용할 수 있는 잘못된 유형의 사용자 이름
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 < 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 > 50; )
wrongTypePwd = 3;
if (plength > 6 && plength < 20) {
if (!patrn.exec(pwd))
wrongTypePwd = 4; user 프런트 엔드는 비밀번호의 유효성을 판단하고 오류 배열
}
}

inputTip(0,wrongNameHtml,wrongTypeName)
inputTip(1,wrongPwdHtml)의 첨자를 반환합니다. ,wrongTypePwd); if (wrongTypePwd == 0 &&wrongTypeName == 0) {//사용자 입력 정보가 완전히 합법적인 경우, 즉 모든 배열 첨자가 0인 경우 Ajax 검증을 시작합니다
//alert($.cookie("logout"));
if(editPass){
pwd = $.md5(pwd)
}
$("#passwd").val (pwd);
$("#login-form input").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) "&기억 =" decodeURI(remb) ;
$.ajax({
유형: 'POST',
url: 'CheckUserLogin.aspx',
//async: false,
캐시: false ,
dataType: 'json',
data: $params,
success: 함수(데이터, 상태) {
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(' UserName', null,{ 만료: 7, 경로: '/' })
$.cookie('Password', null,{ 만료: 7, 경로: '/' }) ;
}
location.href = "/Members/Members.html"
}
else {
$(".btn-master").removeClass("visibility")
$("#login -form input").attr('disabled', false);
inputTip(0,wrongNameHtml,wrongTypeName)
inputTip(1,wrongPwdHtml,wrongTypePwd);
},
error: function () {
wrongTypeName = 5;
inputTip(0,wrongNameHtml,wrongTypeName);
$("#login-form input").attr(' 비활성화됨', false);
$('.remember').bind('click', function () { checkClick(); })
$(".btn-master").removeClass(" visible");
}
})
}

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브라우저

< div class="m-close m-close-short">닫기

더 이상 표시하지 않음< /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');
});
});
}

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('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"] 
intwrongTypeName = 0; 
intwrongTypePwd = 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 비밀번호="";//MD5 암호화 이후의 문자열이 필요합니다
if (uname==userName&&password==pwd ) 
ht.Add("loginSuccess", 0); 
else 
wrongTypeName = 4;//사용자 이름 또는 비밀번호 반환 오류

 if (wrongTypeName > 0 ||wrongTypePwd > 0) 
{ 
ht.Add("wrongTypeName",wrongTypeName) 
ht.Add("wrongTypePwd",wrongTypePwd) 
}; 🎜>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) "}" 

} 

Jquery를 사용하여 최고의 사용자 경험을 갖춘 로그인 페이지를 구축하고 비밀번호 자동 로그인 기능을 기억하세요(백그라운드 코드 포함)_jquery