코딩/Spring 쇼핑몰 프로젝트

Spring [쇼핑몰프로젝트] - 회원가입 유효성 검사[14]

유미._. 2023. 4. 26. 15:10
728x90

 

 

오늘은 회원가입 유효성 검사에 대한 두번째 포스팅을 해보겠습니다 (*^_^*) 2

 

 

구현 순서

 

1. 비밀번호 유효성 검사

2. 비밀번호 확인 입력 검사

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

4. 테스트

 

 

1. 비밀번호 유효성 검사

 

비밀번호 유효성 검사도 아이디 유효성 검사와 같은 형식으로 작성해 줍니다. 

pw란에 아무것도 입력 되지 않으면 span 태그가 보이면서 false를 반환해줍니다.

pw란에 입력이 되어 있으면 span 태그는 사라지게 하고 pwCheck에 true를 대입합니다.

 

 

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

 

 

2. 비밀번호 확인 입력 검사

 

비밀번호 확인 검사도 비밀번호 검사와 마찬가지로 작성해 줍니다. 

pwck란에 아무것도 입력 되지 않으면 span 태그가 보이면서 false를 반환해줍니다.

pwck란에 입력이 되어 있으면 span x태그는 사라지게 하고 pwCheck에 true를 대입합니다.

 

 

			/* 비밀번호 확인 유효성 검사 */
			 if(pwck == ""){
				 $('.final_pwck_ck').css('display','block');
				 pwckCheck = false;
			 }else{
				 $('.final_pwck_ck').css('display','none');
				 pwckCheck = true;
			 }

 

 

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

 

입력한 비밀번호와, 비밀번호 확인란에 있는 두개의 비밀번호가 일치하는지 확인하기 위해 메서드를 하나 만들어 주어야 합니다. 아이디 중복검사와 비슷한 메서드를 하나 만들어 줍니다.

단 비밀번호 일치 검사는 아이디 중복검사와 같이 서버의 요청 없이 자바스크립트로만 진행됩니다.

 

 

span 태그 두 줄을 추가해 줍니다.

 

 

<span class="pwck_input_re_1">비밀번호가 일치합니다.</span>
<span class="pwck_input_re_2">비밀번호가 일치하지 않습니다.</span>

 

추가한 span 태그의 css 속성을 넣어줍니다.

 

 

/* 비밀번호 확인 일치 유효성검사 */
.pwck_input_re_1{
        color : green;
        display : none;    
}
.pwck_input_re_2{
        color : red;
        display : none;    
}

 

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

비밀번호와 비밀번호 확인 항목을 비교하기 위해 변수 두개를 선언해 줍니다.

287번째 라인은 비밀번호가 입력될 때 경고글 (비밀번호 확인을 입력해주세요(final_pwck_ck)의 경고글)을 나타자니 않게 해주는 코드 입니다.

if문을 사용하여 pw와 pwck의 값이 같을 경우 비밀번호가 일치합니다 라는 문구를 띄우고, 비밀번호가 일치하지 않습니다 라는 문구를 숨겨주면서 pwckorCheck에 true 값을 대입해 줍니다.

 

 

/* 비밀번호 확인 일치 유효성 검사 */
$('.pwck_input').on("propertychange change keyup paste input", function(){
	
	var pw = $('.pw_input').val();
	var pwck = $('.pwck_input').val();
	$('.final_pwck_ck').css('display','none'); //입력이 될때 경고글이 사라지도록 하는 코드
	
	if(pw == pwck){
		$('.pwck_input_re_1').css('display','block');
		$('.pwck_input_re_2').css('display','none');
		pwckorCheck = true;
	}else{
		$('.pwck_input_re_1').css('display','none');
		$('.pwck_input_re_2').css('display','block');
		pwckorCheck = false;
	}
	
});

 

 

 

4. 테스트

 

실행시 화면 ↓↓↓

 

 

비밀번호 틀렸을 때 화면 ↓↓↓

 

 

 

비밀번호 일치할 때 화면 ↓↓↓

 

 

 

 

 

 

이상입니다 O(∩_∩)O 

 

 

 

 

 

 

 

 

 

 

 

참고 : Kim VamPa (tistory.com) 👍

728x90
반응형