Jquery를 사용하여 최고의 사용자 경험을 갖춘 로그인 페이지를 구축하고 비밀번호 자동 로그인 기능을 기억하세요(백그라운드 코드 포함)_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) "}"

}

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：jquery가 wcf를 호출하고 data_jquery를 표시하는 방법다음 기사：jquery가 wcf를 호출하고 data_jquery를 표시하는 방법

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술