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

2022년 11월 16일

스프링쇼핑몰

기능구현

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

목표

목표를 말하기에 앞서 그동안 여러 개발 꿈나무? 분들의 안부메일과 질문메일을 많이 받았다. 그동안 무슨 특별한 일이 있었던건 아니고 회사업무도 바빴고 개인적으로 개발하고 있는게 있어 업로드를 자주 하지 못한점 . 사과드린다.

회원가입에 필요한 데이터 누락 확인하는 유효성 검사 기능 구현을 해볼거다.
여태까지의 포스팅으로도 충분히 회원가입 프로세스가 되지만 사용자가 입력해야 할 데이터를 잘못된 형식으로 입력하거나, 입력하지 않은 상태에서 가입하기 버튼을 눌렀을 땐 에러가 발생하게 된다.
따라서 개발자는 에러가 발생하지 않게 사용자가 애플리케이션을 사용하도록 유도해야 한다. 개발자 의도대로 사용자가 사용하도록 하기 위한 수단으로 유효성 검사를 사용한다.
이번에는 가입하기 버튼을 눌렀을때 가입정보를 입력해야 할 항목란에 빈 곳이 없는지를 체크하는 것이다. 만들고자 하는 유효성 검사를 임의로 최종 유효성 검사라고 하겠다. 가입하기 직전 제일 마지막에 체크하는 유효성 검사이기 때문에 최종 유효성 검사라고 부르도록 하자.
전체적인 진행과정은 먼저 각 항목이 정상적으로 입력이 되었다면 true를 입력되지 아니하거나 잘못 입력한 경우 false를 반환하는데 사용하기 위한 변수를 선언할 것이다. 그리고 버튼을 눌렀을때 if문을 통해 순차적으로 각각의 항목란이 어떠한 상황인지에 따라 유효성 검사 변수를 반환하도록 하고 유효성 검사 변수가 모두 true일 때 가입하기 메서드를 서버에 요청하도록 만들어 볼 생각이다.

순서

유효성 검사 통과 유무 변수 선언
form 전송 막기
입력값 변수 선언
span 태그 추가
아이디 유효성 검사
아이디 중복검사 유효성 검사

유효성 검사 통과 유무 변수 선언(join.jsp)

스크립트문 상단 부분에 변수를 선언한 뒤 false로 초기화를 한다.

/* 유효성 검사 통과유무 변수 */
var idCheck = false;		// id
var idckCheck = false; 		// id 중복검사
var pwCheck = false;		//pw
var pwckCheck = false;		//pw check
var pwckcorCheck = false;	// pw check 일치 확인
var nameCheck = false;		// 이름
var mailCheck = false;		// email
var mailnumCheck = false;	// email number check
var addressCheck = false;	// address

form 전송 막기(join.jsp)

기존에 서버에 가입하기 메서드를 요청하던 코드,를 주석처리한다.
회원가입 버튼 작동 메서드는 사용할 것이기 때문에 주석 처리 하지 않는다.

	$(document).ready(function() {
		// 회원가입 버튼
		$(".join_button").click(function() {
			//$("#join_form").attr("action", "/member/join");
			//$("#join_form").submit();
			
		})
	})

입력값 변수 선언(join.jsp)

각 항목에 입력된 값을 편하게 사용하기 위해 변수를 선언하여 각 항목의 입력값으로 초기화 한다. 해당 변수들은 회원가입 버튼 작동 메서드 내부에 선언한다.

	$(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();	// 주소 입력란
			
			//$("#join_form").attr("action", "/member/join");
			//$("#join_form").submit();
			
		})
	})

span 태그 추가

각 항목 입력란에 맞는 span 태그를 추가한다. 추가하고자 하는 span태그는 최종 유효성 검사에서 항목란이 빈공간이거나 잘못입력했을 때 해당 항목에 대한 경고글 역할을 한다.
span 태그의 위치는 클래스 속성명이 항목_wrap인 div태그 내부 제일 아래쪽에 삽입한다.

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="/resources/css/member/join.css">
 <style>

/* 중복아이디 존재하지 않는경우 */
.id_input_re_1{
	color: green;
	display: none;
}
/* 중복아이디 존재하는 경우 */
.id_input_re_2{
	color: red;
	display: none;
}

.correct {

	color: green;
}

.incorrect {
	color: red;
}


</style>
</head>
<body>

<div class="wrapper">
	<form id="join_form" method="post">
	<div class="wrap">
			<div class="subjecet">
				<span>회원가입</span>
			</div>
			<div class="id_wrap">
				<div class="id_name">아이디</div>
				<div class="id_input_box">
					<input class="id_input" name="memberId">
				</div>
				<span class="id_input_re_1">사용 가능한 아이디입니다.</span>
				<span class="id_input_re_2">아이디가 이미 존재합니다.</span>
				<span></span> <!-- span태그 추가 -->
			</div>
			<div class="pw_wrap">
				<div class="pw_name">비밀번호</div>
				<div class="pw_input_box">
					<input class="pw_input" name="memberPw">
				</div>
				<span></span> <!-- span태그 추가 -->
			</div>
			<div class="pwck_wrap">
				<div class="pwck_name">비밀번호 확인</div>
				<div class="pwck_input_box">
					<input class="pwck_input">
				</div>
				<span></span> <!-- span태그 추가 -->
			</div>
			<div class="user_wrap">
				<div class="user_name">이름</div>
				<div class="user_input_box">
					<input class="user_input" name="memberName">
				</div>
				<span></span> <!-- span태그 추가 -->
			</div>
			<div class="mail_check_wrap">
				<div class="mail_name">이메일</div> 
				<div class="mail_input_box">
					<input class="mail_input" name="memberMail">
				</div>
				<span></span> <!-- span태그 추가 -->
				<div class="mail_check_wrap">
					<div class="mail_check_input_box" id="mail_check_input_box_false">
						<input class="mail_check_input" disabled="disabled">
					</div>
					<div class="mail_check_button">
						<span>인증번호 전송</span>
					</div>
					<div class="clearfix"></div>
					<span id="mail_check_input_box_warn"></span>
				</div>
			</div>
			<div class="address_wrap">
				<div class="address_name">주소</div>
				<div class="address_input_1_wrap">
					<div class="address_input_1_box">
						<input class="address_input_1" name="memberAddr1" readonly="readonly">
					</div>
					<div class="address_button" onclick="execution_daum_address()">
						<span>주소 찾기</span>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class ="address_input_2_wrap">
					<div class="address_input_2_box">
						<input class="address_input_2"  name="memberAddr2" readonly="readonly">
					</div>
				</div>
				<div class ="address_input_3_wrap">
					<div class="address_input_3_box">
						<input class="address_input_3"  name="memberAddr3" readonly="readonly">
					</div>
				</div>
				<span></span> <!-- span태그 추가 -->
			</div>
			<div class="join_button_wrap">
				<input type="button" class="join_button" value="가입하기">
			</div>
		</div>
	</form>
</div>

각 span태그의 클래스 속성명과 내용을 다음과 같이 입력한다.

<span class="final_id_ck">아이디를 입력해주세요.</span>
<span class="final_pw_ck">비밀번호를 입력해주세요.</span>
<span class="final_pwck_ck">비밀번호 확인을 입력해주세요.</span>
<span class="final_name_ck">이름을 입력해주세요.</span>
<span class="final_mail_ck">이메일을 입력해주세요.</span>
<span class="final_addr_ck">주소를 입력해주세요.</span>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="/resources/css/member/join.css">
 <style>

/* 중복아이디 존재하지 않는경우 */
.id_input_re_1{
	color: green;
	display: none;
}
/* 중복아이디 존재하는 경우 */
.id_input_re_2{
	color: red;
	display: none;
}

.correct {

	color: green;
}

.incorrect {
	color: red;
}


</style>
</head>
<body>

<div class="wrapper">
	<form id="join_form" method="post">
	<div class="wrap">
			<div class="subjecet">
				<span>회원가입</span>
			</div>
			<div class="id_wrap">
				<div class="id_name">아이디</div>
				<div class="id_input_box">
					<input class="id_input" name="memberId">
				</div>
				<span class="id_input_re_1">사용 가능한 아이디입니다.</span>
				<span class="id_input_re_2">아이디가 이미 존재합니다.</span>
				<span class="final_id_ck">아이디를 입력해주세요.</span> <!-- span태그 추가 -->
			</div>
			<div class="pw_wrap">
				<div class="pw_name">비밀번호</div>
				<div class="pw_input_box">
					<input class="pw_input" name="memberPw">
				</div>
				<span class="final_pw_ck">비밀번호를 입력해주세요.</span> <!-- span태그 추가 -->
			</div>
			<div class="pwck_wrap">
				<div class="pwck_name">비밀번호 확인</div>
				<div class="pwck_input_box">
					<input class="pwck_input">
				</div>
				<span class="final_pwck_ck">비밀번호 확인을 입력해주세요.</span> <!-- span태그 추가 -->
			</div>
			<div class="user_wrap">
				<div class="user_name">이름</div>
				<div class="user_input_box">
					<input class="user_input" name="memberName">
				</div>
				<span class="final_name_ck">이름을 입력해주세요.</span> <!-- span태그 추가 -->
			</div>
			<div class="mail_check_wrap">
				<div class="mail_name">이메일</div> 
				<div class="mail_input_box">
					<input class="mail_input" name="memberMail">
				</div>
				<span class="final_mail_ck">이메일을 입력해주세요.</span> <!-- span태그 추가 -->
				<div class="mail_check_wrap">
					<div class="mail_check_input_box" id="mail_check_input_box_false">
						<input class="mail_check_input" disabled="disabled">
					</div>
					<div class="mail_check_button">
						<span>인증번호 전송</span>
					</div>
					<div class="clearfix"></div>
					<span id="mail_check_input_box_warn"></span>
				</div>
			</div>
			<div class="address_wrap">
				<div class="address_name">주소</div>
				<div class="address_input_1_wrap">
					<div class="address_input_1_box">
						<input class="address_input_1" name="memberAddr1" readonly="readonly">
					</div>
					<div class="address_button" onclick="execution_daum_address()">
						<span>주소 찾기</span>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class ="address_input_2_wrap">
					<div class="address_input_2_box">
						<input class="address_input_2"  name="memberAddr2" readonly="readonly">
					</div>
				</div>
				<div class ="address_input_3_wrap">
					<div class="address_input_3_box">
						<input class="address_input_3"  name="memberAddr3" readonly="readonly">
					</div>
				</div>
				<span class="fonal_addr_ck">주소를 입력해주세요.</span> <!-- span태그 추가 -->
			</div>
			<div class="join_button_wrap">
				<input type="button" class="join_button" value="가입하기">
			</div>
		</div>
	</form>
</div>

span 태그 css 설정

추가한 span 태그를 보이지 않도록 join.css에 아래의 코드를 추가해준다.

/* 유효성 검사 문구 */
 
.final_id_ck{
    display: none;
}
.final_pw_ck{
    display: none;
}
.final_pwck_ck{
    display: none;
}
.final_name_ck{
    display: none;
}
.final_mail_ck{
    display: none;
}
.final_addr_ck{
    display: none;
}

아이디 유효성 검사

회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가한다.
코드를 해석하자면 id 입력란에 아무것도 입력이 되지 않았을때 span태그가 보이고 idCheck변수는 false가 된다.id 입력란에 입력이 되어 있다면 span태그는 사라지고 idCheck는 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;
			}
			
			//$("#join_form").attr("action", "/member/join");
			//$("#join_form").submit();
			
		});
	});

아이디 중복검사 유효성 검사

해당 부분은 아이디 유효성 검사와 같이 if문을 추가하지 않고 기존에 아이디 중복검사를 판단하는 메서드에 있는 코드를 활용한다.
기존 아이디 중복검사 메서드에 있는 if문에서 중복이 없는 경우 idckCheck 변수가 True가 되고 중복되는 아이디가 있는 경우에는 idckCheck 변수가 false가 되도록 추가한다.

// id 중복검사
$('.id_input').on("propertychange change keyup paste input", function () {
	
	//console.log('keyup test')
	
	var memberId = $('.id_input').val();
	var data = {memberId:memberId}
	
	$.ajax({
		type : "post",
		url : "/member/memberIdChk",
		data : data,
		success : function (result) {
			//console.log("확인 : " + result);
			
			if (result != 'fail') {
				$('.id_input_re_1').css("display", "inline-block");
				$('.id_input_re_2').css("display", "none");
				idckCheck = true;
			} else {
				$('.id_input_re_2').css("display", "inline-block");
				$('.id_input_re_1').css("display", "none");
				idckCheck = false;
			}
		}
	}); // ajax 끝
})