최고의 사용자 경험을 생성하기 위해 Jquery를 사용하는 로그인 페이지 구현 코드_jquery

$('.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() });
//로그인 체크박스와 라벨 클릭의 바인딩을 기억하세요. 여기서는 로그인 처리 없이 쿠키만 작성합니다.
//로그인 처리의 개념은 쿠키에 있는 데이터를 직접 읽어서 선택 시 백그라운드에 제출하는 것입니다.
//쿠키에 기록된 비밀번호는 다음과 같습니다. 암호화됨, 비밀번호를 추가하려면 암호화되었습니다