STS3 쇼핑몰 프로젝트[6] 회원 가입 유효성 검사(2)

순서

1. 비밀번호 유효성 검사
2. 비밀번호 확인 입력 검사
3. 비밀번호 확인 일치 검사

1. 비밀번호 유효성 검사

회원 가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다.

코드를 해석하면 비밀번호(pwd) 입력란에 아무것도 입력이 되지 않았을 때 span 태그가 보이도록 하고 pwCheck 변수에 false를 대입합니다.

비밀번호(pwd) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 pwCheck 변수에 true를 대입합니다.

/* 비밀번호 유효성 검사 */
if(pwd == ""){
   $('.final_pw_ck').css('display','block');
   pwCheck = false;
}else{
   $('.final_pw_ck').css('display', 'none');
   pwCheck = true;
}

2. 비밀번호 재입력 유효성 검사

회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다.

코드의 의미는 비밀번호 재입력(pwdCk) 란에 아무것도 입력이 되지 않았을 때 span태그가 보이도록 하고 pwdCheck2 변수는 false를 대입합니다.

비밀번호 재입력(pwdCk)란에 입력이 되어있다면 span태그는 사라지도록 하고 pwdCheck2는 true를 대입합니다.

/* 비밀번호 재입력 유효성 검사 */
if(pwdCk == ""){
	$('.final_pwck_ck').css('display', 'block');
	pwdCheck2 = false;
} else {
	$('.final_pwck_ck').css('display', 'none');
	pwdCheck2 = true;
}

비밀번호와 비밀번호 재확인 값이 없을 때

비밀번호 재확인 값이 없을 때

3. 비밀번호 확인 일치 검사

비밀번호 재입력란에 입력이 되었다는 것을 확인하고 또한 입력한 데이터가 비밀번호 입력란에 입력한 데이터와 일치하는지 반드시 확인해야 합니다.

따라서 아이디 중복검사와 마찬가지로 따로 메서드를 만듭니다.

단, 비밀번호 일치 검사는 아이디 중복검사와 같이 서버의 요청 없이 JavaScript로만 진행합니다.

3.1 span 태그 추가

일치, 불일치 여부에 대한 경고글 역할입니다.

아이디의 속성명이 각각 alert-success, alert-danger인 2개의 span 태그를 추가합니다.

<span id="alert-success" style="display: none; color : green;">비밀번호가 일치합니다.</span>
<span id="alert-danger" style="display: none; color: red;">비밀번호가 일치하지 않습니다.</span>

3.2 메서드 추가

비밀번호 재입력란에 입력을 할 때마다 실행이 되는 메서드를 추가합니다.

/* 비밀번호 확인 일치 유효성 검사 */
$('.pwdCk').on("propertychange change keyup paste input", function(){

});

변수를 선언하여 비밀번호 항목과 비밀번호 확인 항목란의 입력값으로 초기화합니다.

추가적으로 입력이 될 때 '비밀번호 확인을 입력해주세요'(final_pwck_ck) 경고글을 사라지도록 하는 코드를 추가합니다.

/* 비밀번호 확인 일치 유효성 검사 */
$('.pwdCk').on("propertychange change keyup paste input", function(){
 	var pwd1 = $('#password_1').val();
	var pwd2 = $('#password_2').val();
    $('.final_pwck_ck').css('display', 'none');
});

 if 문을 사용하여 비밀번호 입력 값과 비밀번호 재입력 값이 같을 경우 일치한다는 경고글이 뜨도록 하고 비밀번호 확인 유효성 검사 변수인 pwckcorChcek를 ture를 대입합니다.

일치하지 않을 경우 일치하지 않는다는 경고글과 pwckcorCheck 값에 false를 대입합니다.

/* 비밀번호 확인 일치 유효성 검사 */
$('.pwdCk').on("propertychange change keyup paste input", function(){
 	var pwd1 = $('#password_1').val();
	var pwd2 = $('#password_2').val();
    $('.final_pwck_ck').css('display', 'none');
    if (pwd1 == pwd2) {
       $("#alert-success").css('display', 'inline-block');
       $("#alert-danger").css('display', 'none');
       pwckcorCheck = true;
    } else {
       $("#alert-success").css('display', 'none');
       $("#alert-danger").css('display', 'inline-block');
       pwckcorCheck = false;
    }
});

비밀번호 불일치

비밀번호 일치