웹개발 교육/jsp
[57일] jsp (31) - myweb 프로젝트(회원가입 유효성 검사)
ewok
2022. 10. 18. 17:54
memberForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 memberForm.jsp-->
<h3>* 회/원/가/입 *</h3>
<form name="memfrm" id="memfrm" action="memberProc.jsp" onsubmit="return memberCheck()"><!-- myscript.js -->
<span style="color:red; font-weight: bold">* 필수입력</span>
<br>
<table class="table">
<tr>
<th>*아이디</th>
<td style="text-align: left">
<input type="text" name="id" id="id" size="15" readonly>
<input type="button" value="ID중복확인" onclick="idCheck()"><!-- myscript.js -->
</td>
</tr>
<tr>
<th>*비밀번호</th>
<td style="text-align: left"><input type="password" name="passwd" id="passwd" size="15" required></td>
</tr>
<tr>
<th>*비밀번호 확인</th>
<td style="text-align: left"><input type="password" name="repasswd" id="repasswd" size="15" required></td>
</tr>
<tr>
<th>*이름</th>
<td style="text-align: left"><input type="text" name="mname" id="mname" size="15" maxlength="20" required></td>
</tr>
<tr>
<th>*이메일</th>
<td style="text-align: left">
<input type="email" name="email" id="email" size="30" readonly>
<input type="button" value="Email 중복확인" onclick="emailCheck()"><!-- myscript.js -->
</td>
</tr>
<tr>
<th>전화번호</th>
<td style="text-align: left"><input type="text" name="tel" id="tel" size="15"></td>
</tr>
<tr>
<th>우편번호</th>
<td style="text-align: left">
<input type="text" name="zipcode" id="zipcode" size="7" readonly>
<input type="button" value="주소찾기" onclick="DaumPostcode()">
</td>
</tr>
<tr>
<th>주소</th>
<td style="text-align: left"><input type="text" name="address1" id="address1" size="45" readonly></td>
</tr>
<tr>
<th>나머지주소</th>
<td style="text-align: left"><input type="text" name="address2" id="address2" size="45"></td>
</tr>
<tr>
<th>직업</th>
<td style="text-align: left">
<select name="job" id="job">
<option value="0">선택하세요.</option>
<option value="A01">회사원</option>
<option value="A02" selected>IT관련직</option>
<option value="A03">학생</option>
<option value="A04">주부</option>
<option value="A05">기타</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="회원가입" class="btn btn-primary"/>
<input type="reset" value="취소" class="btn btn-primary"/>
</td>
</tr>
</table>
<!-- ----- DAUM 우편번호 API 시작 ----- -->
<div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 110px;position:relative">
<img src="//i1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
</div>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
// 우편번호 찾기 화면을 넣을 element
var element_wrap = document.getElementById('wrap');
function foldDaumPostcode() {
// iframe을 넣은 element를 안보이게 한다.
element_wrap.style.display = 'none';
}
function DaumPostcode() {
// 현재 scroll 위치를 저장해놓는다.
var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
new daum.Postcode({
oncomplete: function(data) {
// 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullAddr = data.address; // 최종 주소 변수
var extraAddr = ''; // 조합형 주소 변수
// 기본 주소가 도로명 타입일때 조합한다.
if(data.addressType === 'R'){
//법정동명이 있을 경우 추가한다.
if(data.bname !== ''){
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if(data.buildingName !== ''){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('address1').value = fullAddr;
// iframe을 넣은 element를 안보이게 한다.
// (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
element_wrap.style.display = 'none';
// 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
document.body.scrollTop = currentScroll;
$('#address2').focus();
},
// 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
onresize : function(size) {
element_wrap.style.height = size.height+'px';
},
width : '100%',
height : '100%'
}).embed(element_wrap);
// iframe을 넣은 element를 보이게 한다.
element_wrap.style.display = 'block';
}
</script>
<!-- ----- DAUM 우편번호 API 종료----- -->
</form>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%>
myscript.js (과제)
function memberCheck() { //회원가입 유효성 검사
//1)아이디 5~10글자 인지?
//2)비밀번호 5~10글자 인지?
//3)비밀번호와 비밀번호확인이 서로 일치하는지?
//4)이름 2글자 이상 인지?
//5)이메일 5글자 인지?
//6)직업을 선택했는지?
}//memberCheck() end
더보기
function memberCheck() { //회원가입 유효성 검사
//1)아이디 5~10글자 인지?
let id = document.getElementById("id").value;
id = id.trim();
if(id.length<5 || id.length>10) {
alert("아이디 5~10글자 이내로 입력해 주세요");
document.getElementById("id").focus();
return false;
}//if end
//2)비밀번호 5~10글자 인지?
let passwd = document.getElementById("passwd").value;
passwd = passwd.trim();
if(passwd.length<5 || passwd.length>10) {
alert("비밀번호 5~10글자 이내로 입력해 주세요");
document.getElementById("passwd").focus();
return false;
}//if end
//3)비밀번호와 비밀번호확인이 서로 일치하는지?
let repasswd = document.getElementById("repasswd").value;
if(passwd!=repasswd) {
alert("비밀번호와 비밀번호확인이 일치하지 않습니다.")
document.getElementById("repasswd").focus();
return false;
}
//4)이름 2글자 이상 인지?
let mname = document.getElementById("mname").value;
mname = mname.trim();
if(mname.length<2) {
alert("이름 2글자 이상 입력해 주세요");
document.getElementById("mname").focus();
return false; //전송하지 않음
}//if end
//5)이메일 5글자 인지?
let email = document.getElementById("email").value;
email = email.trim();
if(email.length<5){
alert("유효한 이메일이 아닙니다.");
return false;
}//if end
//6)직업을 선택했는지?
let job = document.getElementById("job").value;
if(job==0) {
alert("직업을 선택해주세요");
return false;
}//if end
return true;
}//memberCheck() end