[JSP] 회원가입 / 회원인증 ② - 회원가입 : 유효성 검사, 아이디 중복 검사
15 Dec 2021 -
3 minute read
member/Member.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
th.req:after {
content: " *";
color: tomato;
}
</style>
</head>
<body>
<div id="wrap">
<form action="MemberProc.jsp" name="regFrm" id="regFrm" method="post">
<table>
<tbody>
<caption>회원가입</caption>
<tr>
<th class="req">아이디</th>
<td>
<input type="text" name="uId" id="uId" maxlength="10" autofocus>
<button type="button" id="idChkBtn">아이디 중복확인</button>
<input type="hidden" name="uIdBtnClickChk" id="uIdBtnClickChk" value="0">
</td>
</tr>
<tr>
<th class="req">비밀번호</th>
<td>
<input type="password" name="uPw" id="uPw">
</td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td>
<input type="password" id="uPw_Re">
<!-- 유효성검사로 확인하면 되기 때문에 db로 넘길 필요 없음 > name 필요 없음 -->
</td>
</tr>
<tr>
<th class="req">이름</th>
<td>
<input type="text" name="uName" id="uName">
</td>
</tr>
<tr>
<th class="req">이메일</th>
<td>
<input type="text" name="uEmail" id="uEmail">
</td>
</tr>
<tr>
<th>우편번호</th>
<td>
<input type="text" name="uZip" id="uZip" readonly>
<button type="button" id="zipBtn">우편번호찾기</button>
</td>
</tr>
<tr>
<th>주소</th>
<td>
<input type="text" name="uAddr1" id="uAddr1" readonly>
</td>
</tr>
<tr>
<th>상세 주소 입력</th>
<td>
<input type="text" name="uAddr2" id="uAddr2">
<input type="hidden" name="uAddr" id="uAddr">
</td>
</tr>
<tr>
<th>성별</th>
<td>
<label>
남<input type="radio" name="uGender" value="1" checked>
</label>
<label>
여<input type="radio" name="uGender" value="0">
</label>
<!-- label : 글자 클릭해도 선택됨 -->
</td>
</tr>
<tr>
<th>생년월일</th>
<td>
<input type="text" name="uBirthday" id="uBirthday" placeholder="ex) 211203">
</td>
</tr>
<tr>
<th>취미</th>
<td>
코딩<label><input type="checkbox" name="uHobby" value="코딩"></label>
여행<label><input type="checkbox" name="uHobby" value="여행"></label>
게임<label><input type="checkbox" name="uHobby" value="게임"></label>
영화<label><input type="checkbox" name="uHobby" value="영화"></label>
운동<label><input type="checkbox" name="uHobby" value="운동"></label>
</td>
</tr>
<tr>
<th>직업</th>
<td>
<select name="uJob">
<option value="0" selected>-선택-</option>
<option value="회사원">회사원</option>
<option value="학생">학생</option>
<option value="공무원">공무원</option>
<option value="연구전문직">연구전문직</option>
<option value="일반자영업">일반자영업</option>
<option value="의료인">의료인</option>
<option value="언론/예술인">언론/예술인</option>
<option value="무직">무직</option>
<option value="기타">기타</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button type="button" id="joinBtn">회원가입</button>
<button type="reset">다시입력</button>
<button type="button" onclick="location.href='Login.jsp'">로그인</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
/* 아이디 중복 검사 */
function idCheck(){
let uId = $("#uId").val();
if(uId == ""){
alert("아이디를 입력하세요.");
$("#uId").focus();
return;
}
let url = "IdCheck.jsp?uId=" + uId;
window.open(url, "IdCheck", "width=500, height=300");
}
$("#idChkBtn").click(function(){
idCheck();
});
/* 우편번호 찾기 */
function zipCheck(){
let url = "ZipCheck.jsp?zipChk=y";
window.open(url, "zipCodeSearch", "width=540, height=400")
};
$("#zipBtn").click(function(){
zipCheck();
});
/* 유효성 검사 */
$("#joinBtn").click(function(){
let uId = $("#uId").val();
let uIdLen = uId.length;
let uIdReg = /[^a-z|A-Z|0-9|_]/g;
let uPw = $("#uPw").val();
let uPw_Re = $("#uPw_Re").val();
let uName = $("#uName").val();
let uEmail = $("#uEmail").val();
let uIdBtnClickChk = $("#uIdBtnClickChk").val();
let uAddr1 = $("#uAddr1").val();
let uAddr2 = $("#uAddr2").val();
let uAddr = uAddr1 + " " + uAddr2;
if (uId == ""){
alert("아이디를 입력하세요.")
$("#uId").focus();
}
else if (uIdLen <= 5){
alert("6글자 이상 10글자 이하 / 영어, 숫자, _만 입력 가능");
$("#uId").focus();
return;
}
else if (uIdReg.test(uId)){
alert("6글자 이상 10글자 이하 / 영어, 숫자, _만 입력 가능");
$("#uId").focus();
return;
}
/* 아이디 중복확인 검사 */
if (uIdBtnClickChk == 0) {
alert("아이디 중복 확인을 해주세요.");
return;
}
/* 비밀번호 확인 */
else if (uPw == ""){
alert("비밀번호를 입력하세요.")
$("#uPw").focus();
}
else if (uPw != uPw_Re){
alert("비밀번호가 일치하지 않습니다.");
$("#uPw_Re").val("");
$("#uPw_Re").focus();
}
/* 이름 확인 */
else if (uName == ""){
alert("이름을 입력하세요.")
$("#uName").focus();
}
/* 이메일 유효성 검사 */
else if (uEmail == ""){
alert("이메일을 입력하세요.")
$("#uEmail").focus();
}
else if (uEmail.indexOf("@") < 0 || uEmail.indexOf(".") < 0){
alert("이메일 형식을 확인해주세요.")
$("#uEmail").focus();
}
else {
$("#uAddr").val(uAddr);
$("#regFrm").submit();
}
});
});
</script>
</body>
</html>
pack_Member/MemberMgr.java
package pack_Member;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class MemberMgr {
private DBConnectionMgr pool;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = null;
public MemberMgr() {
try {
pool = DBConnectionMgr.getInstance();
} catch (Exception e) {
System.out.println(e.getMessage());
}
}
// 아이디 중복 확인
public boolean checkId(String uId) {
boolean flag = false;
try {
conn = pool.getConnection();
sql = "select uId from tblMember where uId=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, uId);
// 데이터가 존재한다면 flag가 true로 바뀜
flag = pstmt.executeQuery().next();
} catch (Exception e) {
System.out.println(e.getMessage());
} finally {
pool.freeConnection(conn, pstmt, rs);
}
return flag;
}
}
member/IdCheck.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean id="memberMgr" class="pack_Member.MemberMgr" scope="page" />
<%
request.setCharacterEncoding("UTF-8");
String uId = request.getParameter("uId");
boolean result = memberMgr.checkId(uId);
%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이디 중복 체크</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function fnClose(){
opener.regFrm.uIdBtnClickChk.value="1";
window.close();
}
</script>
</head>
<body>
<div id="wrap">
<b><%=uId %></b>
<% if (result) { %>
는 이미 사용중인 아이디입니다.
<%
} else {
%>
는 사용 가능한 아이디입니다.
<% } %>
<button type="button" onclick="fnClose()">창 닫기</button>
</div>
</body>
</html>
