Spring [쇼핑몰프로젝트] - 회원가입 유효성 검사[13]
오늘은 회원가입 유효성 검사에 대한 첫번째 포스팅을 해보겠습니다 (*^_^*) 1
구현 순서
1. 유효성 검사란 ?
2. 유효성 검사 통과 유무 변수 선언
3. form 전송 막기
4. 입력값 변수 선언
5. span 태그 추가
6. 아이디 유효성 검사
7. 아이디 중복검사 유효성 검사
1. 유효성 검사란 ?
만약 사용자가 데이터를 잘못된 형식으로 입력하거나 NULL 값을 입력하고 데이터를 제출 한다면 에러가 발생하게 됩니다. 이를 방지 하기 위해 유효성 검사를 걸어 놓습니다. 유효성 검사는 사용자가 애플리케이션을 사용할 때 개발자가 의도한대로 사용하기 위한 수단입니다.
각 항목 (아이디, 비번 등)이 정상적으로 입력이 되었다면 true를, 그렇지 않으면 false를 반환하는데 사용하기 위한 변수를 선언해 줄 것입니다. 그리고 버튼을 눌렀을 때 if문을 통해 순차적으로 true 값이 나오면 메서드를 서버에 요청 할 수 있도록 구현하겠습니다.
2. 유효성 검사 통과 유무 변수 선언
스크립트 상단에 유효성 검사를 위한 변수를 선언해 주고 false로 초기화 해줍니다.
3. form 전송 막기
기존 서버에 가입하기 메서드를 요청하면 작동되는 코드를 주석처리 해줍니다.
4. 입력값 변수 선언
입력값의 변수를 선언하여 각 항목의 입력값으로 초기화 해줍니다.
5. span 태그 추가
각 항목의(아이디, 비밀번호, 비밀번호 확인, 이름, 이메일, 주소) div 태그로 쌓인 부분의 제일 하단에 <span></span> 태그를 넣어 줍니다.
각 클래스의 span 태그 내용은 아래와 같이 넣어 줍니다.
join.jsp의 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>
</div>
<div class="pw_wrap">
<div class="pw_name">비밀번호</div>
<div class="pw_input_box">
<input class="pw_input" name="memberPw" type="password">
</div>
<span class="final_pw_ck">비밀번호를 입력해주세요.</span>
</div>
<div class="pwck_wrap">
<div class="pwck_name">비밀번호 확인</div>
<div class="pwck_input_box">
<input class="pwck_input" type="password">
</div>
<span class="final_pwck_ck">비밀번호 확인을 입력해주세요.</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>
</div>
<div class="mail_wrap">
<div class="mail_name">이메일</div>
<div class="mail_input_box">
<input class="mail_input" name="memberMail">
</div>
<span class="final_mail_ck">이메일을 입력해주세요.</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="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="final_addr_ck">주소를 입력해주세요.</span>
</div>
<div class="join_button_wrap">
<input type="button" class="join_button" value="가입하기">
</div>
</div>
</form>
</div>
join.css에 아래의 코드를 추가해 줍니다.
추가한 span 태그를 보이지 않도록 설정한 코드입니다.
/* 유효성 검사 문구 */
.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;
}
6. 아이디 유효성 검사
회원가입 버튼 작동 메서드에 아래의 코드를 추가해 줍니다.
만약 id값이 null일때 span 태그(아이디를 입력해 주세요)가 보이고, false를 반환합니다.
만약 id값이 입력되었다면 span 태그는 사라지고 true를 반환합니다.
7. 아이디 중복검사 유효성 검사
아이디 값이 들어와도, 아이디가 중복이 되면 안되기 때문에 아이디 중복 검사의 if문에도 코드를 추가해 줍니다.
중복이 없는 경우 idCheck 변수가 true가 되고, 중복되는 아이디가 있을 경우 false를 반환하도록 추가해 줍니다.
이상입니다 O(∩_∩)O
참고 : Kim VamPa (tistory.com) 👍