우당탕탕 개발일지
45일차_회원가입 본문
반응형
Git Hub
https://github.com/ujin302/Web2024/tree/main/projectJSP
프로젝트명 : projectJSP
기능
- 회원가입
- id, name, pwd 유효성 검사
- id 중복 검사
Java
- MemberDAO
- MemerDTO
jsp
- checkid.jsp
- memberWrite.jsp
- memberWriteForm.jsp
- index.jsp
1. 회원가입 화면
index.jsp
화면1 참고
회원가입 버튼 클릭 시, 화면2로 이동
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>메인화면</h2>
<h3><a href="./member/memberWriteForm.jsp">회원가입</a></h3>
<h3><a href="">로그인</a></h3>
<h3><a href="">로그아웃</a></h3>
<h3><a href="">글쓰기</a></h3>
<h3><a href="">목록</a></h3>
</body>
</html>
memberWriteForm.jsp
화면 2 참고
회원가입 화면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="./memberWrite.jsp" method="post">
<table border="1" >
<tr>
<th>이름</th>
<td><input id="name" name="name" placeholder="이름 입력"></td>
</tr>
<tr>
<th>아이디</th>
<td>
<input data-checkId="false" id="id" name="id" placeholder="아이디 입력">
<input id="idBtn" type="button" onclick="checkId()" value="중복체크">
<div id="idDiv"></div><div id="checkIdBool" hidden>false</div>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" class="pwd" id="pwd" name="pwd" placeholder="비밀번호 입력"></td>
</tr>
<tr>
<th>재확인</th>
<td><input type="password" class="pwd" id="repwd" name="repwd" placeholder="비밀번호 확인"></td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="남" checked="checked">남자
<input type="radio" name="gender" value="여">여자
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input name="email1"> @
<input id="email2" name="email2">
<input id="email3" name="email3" list="email3_list" oninput="check">
<datalist id="email3_list">
<option value="">직접입력</option>
<option value="hanmail.com">hanmail.com</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
</datalist>
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<select class="tel" id="tel1" name="tel1" id="selectEmail">
<option value="010">010</option>
<option value="011">011</option>
<option value="019">019</option>
</select>
-
<input size="4" type="text" class="tel" name="tel2" maxlength="4">
-
<input size="4" type="text" class="tel" name="tel3" maxlength="4">
</td>
</tr>
<tr>
<th>주소</th>
<td class="addr">
<input name="zipcode" id="zipcode" readonly placeholder="우편번호">
<input type="button" value="우편번호 검색" onclick="checkPost()"><br>
<input class="addrInput" id="addr1" name="addr1" readonly="readonly" placeholder="주소"><br>
<input class="addrInput" id="addr2" name="addr2" placeholder="상세주소">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="회원가입" onclick="return memberJoin(event)">
<input type="reset" value="다시입력">
</td>
</tr>
</table>
</form>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script type="text/javascript" src="../js/member.js"></script>
</body>
</html>
2. 우편번호 서비스
member.js: checkPost()
Daum 우편번호 API 사용하여 구현
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
function checkPost() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
document.getElementById("addr1").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("addr2").focus();
}
}).open();
}
3. 아이디 중복 확인
member.js: checkId()
중복체크 버튼 클릭 시, 값이 있다면 아래 화면처럼 작은 창이 발생한다. (화면 2, 3)
만약 값이 없으면 화면1과 같이 '아이디를 입력하세요.' 문구가 발생한다.
// 아이디 중복 체크
function checkId() {
let id = document.getElementById('id').value;
if(id =='') {
document.getElementById('idDiv').innerText = '아이디를 입력하세요.';
}else {
document.getElementById('idDiv').innerText = '';
window.open("./checkId.jsp?id="+id, "myWindow", "width=450 height=150 top=200 left=700");
}
}
checkId.jsp
중복체크 버튼 클릭 시, 발생하는 창이다.
중복 여부에 따라 '사용가능' 혹은 '중복 아이디' 라는 문구가 발생한다.
중복된 아이디일 경우 새로운 아이디를 입력하는 창이 나온다. (화면 2)
새롭게 작성 아이디가 중복되지 않을 경우, 회원가입 화면의 아이디 입력값에 작성된다. (화면 3, 4)
아이디 중복 체크 완료 후, 회원가입 화면의 아이디 속성 'data-checkId' 의 속성을 true로 설정한다.
<%@page import="DAO.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
MemberDAO memberDAO = MemberDAO.getInstance();
String id = request.getParameter("id");
boolean exit = memberDAO.isExistId(id);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%if(exit) { %>
<div>해당 아이디는 이미 존재합니다.</div>
<br><br>
<form action="checkId.jsp">
아이디 <input type="text" name="id">
<input type="submit" value="중복체크">
</form>
<%}else { %>
<div>사용 가능한 아이디입니다.</div>
<br><br>
<input type="button" value="사용하기" onclick="checkIdClose('<%=id%>')">
<%} %>
<script type="text/javascript">
function checkIdClose(id) {
console.log("checkIdClose() 호출");
// opener : 열려있는 창!
opener.document.getElementById("id").value = id;
window.close();
opener.document.getElementById('id').dataset['checkid'] = true; // 중복체크 O
console.log('중복체크 결과 : ' + opener.document.getElementById('id').dataset['checkid']);
opener.document.getElementById("pwd").focus();
}
</script>
</body>
</html>
member.js: focusId()
memberWriteForm.jsp 에서 id 입력칸에 'data-checkId' 속성을 부여했다.
'data-checkId' 속성의 초기화를 false로 초기화한다.
중복 체크 후, 'data-checkId' 속성은 true로 설정된다.
그 이후, 사용자가 또 다시 아이디를 변경하였을 경우, 'data-checkId' 속성을 false로 설정한다.
// 아이디 중복 체크 후, 사용자가 id를 다시 설정하였을 경우
let focusId = null;
document.getElementById('id').addEventListener("focus", () => {
focusId = document.getElementById('id').value;
});
document.getElementById('id').addEventListener("blur", () => {
if(focusId != document.getElementById('id').value) { // id 변경
document.getElementById('id').dataset['checkid'] = false; // 중복체크 X
}
});
4. 회원가입 진행
member.js: memberJoin()
1. 아이디 유효성 확인
2. 이름 유효성 확인
3. 비밀번호 유효성 확인
4. 비밀번호 재확인 유효성 확인
위의 4가지를 모두 통과하면 회원가입 완료라는 창으로 넘어간다.
function memberJoin(e) {
// 1. 아이디 유효성 확인
if(!eval(document.getElementById('id').dataset['checkid'])) {
alert("아이디 중복체크 하세요.");
e.preventDefault();
return false;
}
// 2. 이름 유효성 확인
if(document.getElementById('name').value == '') {
alert("이름을 작성하세요.");
e.preventDefault();
return false;
}
// 3. 비밀번호 유효성 확인
if(document.getElementById('pwd').value == '') {
alert("비밀번호을 작성하세요.");
e.preventDefault();
return false;
}
// 3. 비밀번호 재확인 유효성 확인
if(document.getElementById('repwd').value == '') {
alert("비밀번호 재확인하세요.");
e.preventDefault();
return false;
}else if(document.getElementById('repwd').value != document.getElementById('pwd').value) {
alert("비밀번호가 일치하지 않습니다. 비밀번호를 다시 확인하세요.");
e.preventDefault();
return false;
}
}
6. DB
반응형
'비트캠프 > 이론 및 정리' 카테고리의 다른 글
| 49일차_MyBatis (0) | 2024.09.10 |
|---|---|
| 48일차_페이징, MyBatis 맛보기 (0) | 2024.09.09 |
| 47일차_회원정보 수정 (0) | 2024.09.09 |
| 46일차_로그인, Cookie vs HttpSession (0) | 2024.09.05 |
| 45일차_JSP 전역 vs 지역, 주석 (2) | 2024.09.05 |
'비트캠프/이론 및 정리' Related Articles
more
