스프링으로 쇼핑몰을 만들어보자8 - 회원가입 유효성 검사3

2022년 11월 17일

스프링쇼핑몰

기능구현

회원가입(주소API연동, 이메일 인증, ajax를 사용하여 아이디 중복검사)
관리자 페이지(인터셉터 적용, 상품관리, 회원관리)
업로드(이미지 등록, 수정, 삭제)
검색
페이징
구매(장바구니, 포인트사용)
댓글(등록,수정,삭제)
중간에 막혔거나 에러 해결 못하겠으면 yoonbitnara@gmail.com 으로 문의

순서

이름 유효성 검사
이메일 유효성 검사
인증번호 유효성 검사
주소 유효성 검사
최종 유효성 검사 및 전송
테스트

이름 유효성 검사(join.jsp)

회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가한다. 코드를 해석하면 이름 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 nameCheck 변수는 false를 대입한다. 이름 입력란에 입력이 되어 있다면 span태그는 사라지게 하고 nameCheck에 true를 대입한다.

	$(document).ready(function() {
		// 회원가입 버튼
		$(".join_button").click(function() {
			/* 입력값 변수 */
			var id = $('.id_input').val();		// id 입력란
			var pw = $('.pw_input').val();		// 비밀번호 입력란
			var pwck = $('.pwck_input').val();	// 비밀번호 확인 입력란
			var name = $('.name_input').val();	// 이름 입력란
			var mail = $('.mail_input').val();	// 이메일 입력란
			var addr = $('.addr_input').val();	// 주소 입력란
			
			/* 아이디 유효성 검사 */
			if (id == "") {
				$('.final_id_ck').css('display', 'block');
				idCheck = false;
			} else {
				$('.final_id_ck').css('display', 'none');
				idCheck = true;
			}
			
			/* 비밀번호 유효성 검사 */
			if(pw == "") {
				$('.final_pw_ck').css('display', 'block');
				pwCheck = false;
			} else {
				$('.final_pw_ck').css('display', 'none');
				pwCheck = true;
			}
			
			/* 비밀번호 확인 유효성 검사 */
			if (pwck == "") {
				$('.final_pwck_ck').css('display','block');
				pwckCheck = false;
			} else {
				$('.final_pwck_ck').css('display','none');
				pwckCheck = true;
			}
			
			/* 이름 유효성 검사 */
			if (name == "") {
				$('.final_name_ck').css('display', 'block');
				nameCheck = false;
			} else {
				$('.final_name_ck').css('display', 'none');
				nameCheck = true;
			}
			
			//$("#join_form").attr("action", "/member/join");
			//$("#join_form").submit();
			
			
		});
	});

인증번호 유효성 검사

위와 내용은 비슷하다.앞서 만들어 놓은 메서드에 mailnumCheck 변수에 주석을 풀어준다.

/* 인증번호 비교 */
$(".mail_check_input").blur(function(){
	
	var inputCode = $(".mail_check_input").val();		// 입력코드	
	var checkResult = $("#mail_check_input_box_warn");	// 비교 결과 	
	
	if(inputCode == code){							// 일치할 경우
		checkResult.html("인증번호가 일치합니다.");
		checkResult.attr("class", "correct");		
		mailnumCheck = true;
	} else {											// 일치하지 않을 경우
		checkResult.html("인증번호를 다시 확인해주세요.");
		checkResult.attr("class", "incorrect");
		mailnumCheck = false;
	}	
	
});

	$(document).ready(function() {
		// 회원가입 버튼
		$(".join_button").click(function() {
			/* 입력값 변수 */
			var id = $('.id_input').val();		// id 입력란
			var pw = $('.pw_input').val();		// 비밀번호 입력란
			var pwck = $('.pwck_input').val();	// 비밀번호 확인 입력란
			var name = $('.name_input').val();	// 이름 입력란
			var mail = $('.mail_input').val();	// 이메일 입력란
			var addr = $('.addr_input').val();	// 주소 입력란
			
			/* 아이디 유효성 검사 */
			if (id == "") {
				$('.final_id_ck').css('display', 'block');
				idCheck = false;
			} else {
				$('.final_id_ck').css('display', 'none');
				idCheck = true;
			}
			
			/* 비밀번호 유효성 검사 */
			if(pw == "") {
				$('.final_pw_ck').css('display', 'block');
				pwCheck = false;
			} else {
				$('.final_pw_ck').css('display', 'none');
				pwCheck = true;
			}
			
			/* 비밀번호 확인 유효성 검사 */
			if (pwck == "") {
				$('.final_pwck_ck').css('display','block');
				pwckCheck = false;
			} else {
				$('.final_pwck_ck').css('display','none');
				pwckCheck = true;
			}
			
			/* 이름 유효성 검사 */
			if (name == "") {
				$('.final_name_ck').css('display', 'block');
				nameCheck = false;
			} else {
				$('.final_name_ck').css('display', 'none');
				nameCheck = true;
			}
			
			/* 이메일 유효성 검사 */
			if (mail == "") {
				$('.final_mail_ck').css('display', 'block');
				mailCheck = false;
			} else {
				$('.final_mail_ck').css('display', 'none');
				mailCheck = true;
			}
			
			//$("#join_form").attr("action", "/member/join");
			//$("#join_form").submit();
			
			
		});
	});

주소 유효성 검사

이것 또한 비슷하다.

	$(document).ready(function() {
		// 회원가입 버튼
		$(".join_button").click(function() {
			/* 입력값 변수 */
			var id = $('.id_input').val();		// id 입력란
			var pw = $('.pw_input').val();		// 비밀번호 입력란
			var pwck = $('.pwck_input').val();	// 비밀번호 확인 입력란
			var name = $('.name_input').val();	// 이름 입력란
			var mail = $('.mail_input').val();	// 이메일 입력란
			var addr = $('.addr_input').val();	// 주소 입력란
			
			/* 아이디 유효성 검사 */
			if (id == "") {
				$('.final_id_ck').css('display', 'block');
				idCheck = false;
			} else {
				$('.final_id_ck').css('display', 'none');
				idCheck = true;
			}
			
			/* 비밀번호 유효성 검사 */
			if(pw == "") {
				$('.final_pw_ck').css('display', 'block');
				pwCheck = false;
			} else {
				$('.final_pw_ck').css('display', 'none');
				pwCheck = true;
			}
			
			/* 비밀번호 확인 유효성 검사 */
			if (pwck == "") {
				$('.final_pwck_ck').css('display','block');
				pwckCheck = false;
			} else {
				$('.final_pwck_ck').css('display','none');
				pwckCheck = true;
			}
			
			/* 이름 유효성 검사 */
			if (name == "") {
				$('.final_name_ck').css('display', 'block');
				nameCheck = false;
			} else {
				$('.final_name_ck').css('display', 'none');
				nameCheck = true;
			}
			
			/* 이메일 유효성 검사 */
			if (mail == "") {
				$('.final_mail_ck').css('display', 'block');
				mailCheck = false;
			} else {
				$('.final_mail_ck').css('display', 'none');
				mailCheck = true;
			}
			
			/* 주소 유효성 검사 */
			if (addr == "") {
				$('.final_addr_ck').css('display', 'block');
				addressCheck = false;
			} else {
				$('.final_addr_ck').css('display', 'none');
				addressCheck = true;
			}
			
			//$("#join_form").attr("action", "/member/join");
			//$("#join_form").submit();
			
			
		});
	});

최종 유효성 검사

최종적으로 앞의 유효성 검사 변수들이 모두 true가 되었는지 확인한다. 모두 true일 경우 회원가입 form을 서버에 전송한다.
최종 유효성 검사를 위한 if문을 작성한다.

			/* 최종 유효성 검사 */
			if(idCheck && idckCheck && pwCheck && pwckCheck && pwckcorCheck && nameCheck && mailCheck && mailnumCheck && addressCheck){
				 
	        }    

if문 내부에 주석 처리 하였던 회원가입 form을 전송하는 코드를 넣는다.

			/* 최종 유효성 검사 */
			if(idCheck && idckCheck && pwCheck && pwckCheck && pwckcorCheck && nameCheck && mailCheck && mailnumCheck && addressCheck){
				
				$("#join_form").attr("action", "/member/join");
				$("#join_form").submit();
				
	        }    

if문 아래에 return false를 넣는다. 위의 if문에서 유효성 검사 변수들 중 단 한개라도 false가 있을 경후 해당 코드를 읽게 되는데 감싸고 있는 메서드(join_button click)메서드 정상 종료 되지 못할 경우를 대비해서 넣었다.

	$(document).ready(function() {
		// 회원가입 버튼
		$(".join_button").click(function() {
			/* 입력값 변수 */
			var id = $('.id_input').val();		// id 입력란
			var pw = $('.pw_input').val();		// 비밀번호 입력란
			var pwck = $('.pwck_input').val();	// 비밀번호 확인 입력란
			var name = $('.name_input').val();	// 이름 입력란
			var mail = $('.mail_input').val();	// 이메일 입력란
			var addr = $('.addr_input').val();	// 주소 입력란
			
			/* 아이디 유효성 검사 */
			if (id == "") {
				$('.final_id_ck').css('display', 'block');
				idCheck = false;
			} else {
				$('.final_id_ck').css('display', 'none');
				idCheck = true;
			}
			
			/* 비밀번호 유효성 검사 */
			if(pw == "") {
				$('.final_pw_ck').css('display', 'block');
				pwCheck = false;
			} else {
				$('.final_pw_ck').css('display', 'none');
				pwCheck = true;
			}
			
			/* 비밀번호 확인 유효성 검사 */
			if (pwck == "") {
				$('.final_pwck_ck').css('display','block');
				pwckCheck = false;
			} else {
				$('.final_pwck_ck').css('display','none');
				pwckCheck = true;
			}
			
			/* 이름 유효성 검사 */
			if (name == "") {
				$('.final_name_ck').css('display', 'block');
				nameCheck = false;
			} else {
				$('.final_name_ck').css('display', 'none');
				nameCheck = true;
			}
			
			/* 이메일 유효성 검사 */
			if (mail == "") {
				$('.final_mail_ck').css('display', 'block');
				mailCheck = false;
			} else {
				$('.final_mail_ck').css('display', 'none');
				mailCheck = true;
			}
			
			/* 주소 유효성 검사 */
			if (addr == "") {
				$('.final_addr_ck').css('display', 'block');
				addressCheck = false;
			} else {
				$('.final_addr_ck').css('display', 'none');
				addressCheck = true;
			}
			
			/* 최종 유효성 검사 */
			if(idCheck && idckCheck && pwCheck && pwckCheck && pwckcorCheck && nameCheck && mailCheck && mailnumCheck && addressCheck){
				
				$("#join_form").attr("action", "/member/join");
				$("#join_form").submit();
				
	        }
			
			return false;
		});
	});

TEST

아무것도 입력하지 않았을 때

일부분만 입력했을 때

회원가입 완료

DB 확인