최고의 사용자 경험을 생성하기 위해 Jquery를 사용하는 로그인 페이지 구현 코드_jquery
- WBOY원래의
- 2016-05-16 18:05:131066검색
다음 작업은 클라이언트 서버에 기본적으로 적용되며 js 지원을 활성화합니다. 스크립트가 없으면 직접 코드를 작성하여 구현하세요.
먼저 전시 사진을 붙여넣으세요:
기본 상태:
오류 상태:
대기 상태:
워크플로:
사용자가 로그인하여 제출하기 전에는 클라이언트 확인 입력 상자에서 null 값과 길이만 판단합니다. 서버에 제출한 후 제출된 문자열의 적법성과 길이를 자동으로 확인하고 잘못된 문자를 제거하여 반환합니다. 반환된 법적 문자열을 기반으로 로그인 확인이 수행된 후 처리를 위해 json 데이터가 프런트 데스크로 반환됩니다. 처리를 위한 프론트 데스크.
여기에서는 프런트엔드 처리 프로세스에 중점을 둡니다.
먼저 페이지를 연 후 페이지에 포커스를 두세요.
$('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 (이벤트 ) {
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 () {
varwrongTypeName = 0,//사용자 이름의 오류 유형을 오류 메시지의 첨자로 직접 사용할 수 있습니다. array
wrongTypePwd = 0,//잘못된 사용자 비밀번호 유형
uname = $("#uname").val(),//Username
pwd = $("#passwd").val( ), //사용자 비밀번호
plength = pwd.length,
nlength = uname.length,//Length
wrongNameHtml = new Array("", "사용자 이름을 입력하세요.", "사용자 이름을 입력하세요. is too short" , "사용자 이름이 12자를 초과했습니다.", "사용자 이름이나 비밀번호가 잘못되었습니다.", "시간이 초과되었습니다. 다시 로그인하세요."),
wrongPwdHtml = new Array("", "비밀번호를 입력하세요. ", "비밀번호 길이가 6자리 미만입니다.", "비밀번호 길이가 20자리를 초과합니다.", "비밀번호에 잘못된 문자가 포함되어 있습니다.");
//여기에 정의된 것은 일련의 오류 메시지입니다
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 > 20)
wrongTypePwd = 3
if (plength > 6 && plength < 20) {
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,wrongPwdHtml,wrongTypePwd);
if (wrongTypePwd == 0 &&wrongTypeName == 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').val();
//alert($params);
$.ajax({
url: "CheckUserLogin.aspx",
data: $params,
dataType: "json" ,
success: function (data) {
$(data).each(function (te, u) {
wrongTypeName = u.wrongTypeName;
wrongTypePwd = u .wrongTypePwd;
var loginSuccess = u.loginSuccess;//서버에서 반환된 json 데이터 가져오기
//alert(wrongTypeName)
//alert(wrongTypePwd)
if (loginSuccess = = 0) {
location.href = "/Members/Memb.html";//성공하면 바로 이동
} else {//로그인에 실패하면 친숙한 프롬프트 메시지 반환
$(". btn-master").removeClass(" 가시성");
$("#login-form input").attr('disabled', false);
inputTip(0,wrongNameHtml,wrongTypeName);
inputTip(1,wrongPwdHtml,wrongTypePwd) ;
}
});
},
error: function () {//Ajax 요청 오류가 발생하면 타임아웃이 반환되고 다시 시도됩니다.
wrongTypeName = 5;
inputTip(0,wrongNameHtml,wrongTypeName)
$("#login-form input").attr('disabled', false)
$('.remember ').bind('click', function () { checkClick(); });
$(".btn-master").removeClass("visibility")
}
});
}
})
코드 복사 코드는 다음과 같습니다.
var checkClick = function () {
if ($('#remember-long').attr('checked') == "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 ($('#remember-long').attr('checked') == "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() });
//로그인 체크박스와 라벨 클릭의 바인딩을 기억하세요. 여기서는 로그인 처리 없이 쿠키만 작성합니다.
//로그인 처리의 개념은 쿠키에 있는 데이터를 직접 읽어서 선택 시 백그라운드에 제출하는 것입니다.
//쿠키에 기록된 비밀번호는 다음과 같습니다. 암호화됨, 비밀번호를 추가하려면 암호화되었습니다
코드 복사 코드는 다음과 같습니다.
$(document).bind('keydown', 'return', function(){$(".btn-submit").trigger('click');})
// 키보드의 Enter 이벤트 바인딩
Microsoft가 IE6.0을 제거하도록 도와주세요
if ($.browser.msie && $.browser.version == "6.0") {
//Microsoft가 ie6을 제거하도록 도와주세요
if ($. cookie('masterShow') != "hidden")
$('body').append('
전체 파일 패키지 다운로드:
jquery_login.rar 작성자: Ethan.zhu
$(document).bind('keydown', 'return', function(){$(".btn-submit").trigger('click');})
// 키보드의 Enter 이벤트 바인딩
Microsoft가 IE6.0을 제거하도록 도와주세요
코드 복사 코드는 다음과 같습니다.
if ($.browser.msie && $.browser.version == "6.0") {
//Microsoft가 ie6을 제거하도록 도와주세요
if ($. cookie('masterShow') != "hidden")
$('body').append('
귀하의 브라우저는IE6.0, 취약점이 많고 사용자 경험이 좋지 않습니다. Microsoft 공식에서는 귀하의 컴퓨터 보안과 최상의 사용자 경험을 위해 IE8.0이상 또는 Firefox브라우저
닫기
')
$(".master").delay(1000).slideDown('', function () {
$(".m-close") .fadeIn();
}) ;
$(".m-close-short").click(function () {
$(".m-close").fadeOut('', function () {
$(" .master").slideUp();
})
})
$(".m-close-long").click(함수( ) {
$(".m -close").fadeOut('', function () {
$(".master").slideUp();
$.cookie('masterShow', 'hidden');
});
}
페이지 내용은 Diandian.com의 이전 버전을 표절한 것입니다. Kissy 라이브러리를 사용하여 매번 확인을 위해 서버로 다시 보내고 전체 페이지를 새로 고치기 위해 jquery를 사용하여 ajax 비동기 확인을 사용하도록 전환했으며 반복 로그인을 방지하기 위해 확인 프로세스 중에 페이지 요소를 사용할 수 없도록 설정했습니다. $(".master").delay(1000).slideDown('', function () {
$(".m-close") .fadeIn();
}) ;
$(".m-close-short").click(function () {
$(".m-close").fadeOut('', function () {
$(" .master").slideUp();
})
})
$(".m-close-long").click(함수( ) {
$(".m -close").fadeOut('', function () {
$(".master").slideUp();
$.cookie('masterShow', 'hidden');
});
}
전체 파일 패키지 다운로드:
jquery_login.rar 작성자: Ethan.zhu
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.