자바스크립트: 필수 값+정규표현식 검증
check.js
function check() {
var id = document.getElementById('id').value;
var pw = document.getElementById('pw').value;
var chkPw = document.getElementById('chkPw').value;
var name = document.getElementById('name').value;
if (id == "" || pw == "" || name == "") {
alert('필수 항목입니다.');
return;
}
if (pw != chkPw) {
alert('비밀번호가 일차하지 않습니다.');
return;
}
var idReg = /^[A-Za-z][A-Za-z0-9]{4,14}$/;
var pwReg = /[A-Za-z0-9`~!@#$%^&*()-_+=]{8,16}$/;
var nameReg = /[가-힣A-Za-z]$/;
if (!idReg.test(id)) {
alert('아이디는 5 ~ 15자리의 첫 문자가 숫자가 아닌 대소문자와 숫자의 조합이어야 합니다.');
return;
} else if (!pwReg.test(pw)) {
alert('비밀번호는 8 ~ 16자리의 대소문자와 숫자, 특수문자의 조합이어야 합니다.');
return;
} else if (!nameReg.test(name)) {
alert('이름은 한글 또는 영문자이어야 합니다.');
return;
}
document.getElementById('f').submit();
}
function checkLogin() {
var id = document.getElementById('id').value;
var pw = document.getElementById('pw').value;
if (id == "" || pw == "") {
alert('필수 항목입니다.');
return;
}
document.getElementById('f').submit();
}
function checkPw() {
var pw = document.getElementById('pw').value;
if (pw == "") {
alert('필수 항목입니다.');
return;
}
document.getElementById('f').submit();
}
회원가입
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<script src="check.js"></script>
</head>
<body>
<div align="center">
<h2>회원 등록</h2>
<form action="registerService.jsp" method="post" id="f">
<table>
<tr>
<td><input type="text" name="id" id="id" placeholder="아이디"></td>
</tr>
<tr>
<td><input type="password" name="pw" id="pw" placeholder="비밀번호"></td>
</tr>
<tr>
<td><input type="password" name="chkPw" id="chkPw" placeholder="비밀번호 확인"></td>
</tr>
<tr>
<td><input type="text" name="name" id="name" placeholder="이름"></td>
</tr>
<tr>
<td><input type="text" name="addr" id="addr" placeholder="주소"></td>
</tr>
<tr>
<td><input type="text" name="tel" id="tel" placeholder="전화번호"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="회원가입" onclick="check()">
<input type="reset" value="취소" onclick="location.href='index.jsp'">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
회원가입 버튼에 onclick속성을 지정하였다.
버튼이 클릭될 때마다 check() 함수를 호출하여 필수 값(아이디, 비밀번호, 이름)이 빈 값인지 확인하고, 빈 값이 아니고 입력받은 필수 값이 모두 정규 표현식을 만족한다면 form태그 내부의 데이터들을 registerCheck.jsp로 전달한다.
registerCheck.jsp
자바스크립트로 1차 검증을 했음에도 서버측에 2차 검증을 수행하는 이유는 1차 검증 이후 서버로 넘어오는 과정에서 누군가에 의해 데이터가 위/변조될 수 있기 때문이다.
멤버DTO는 아이디, 비밀번호, 이름, 주소, 전화번호라는 속성을 갖고, 이때 각 멤버들을 아이디[primary key(기본키)]로 식별한다.
필수 값들이 빈 값이 아니고 입력 받은 아이디가 존재하지 않는 아이디라면, DB에 멤버를 추가하고 서버에 index.jsp를 요청하여 index페이지로 이동시킨다.
그렇지 않다면 로그인 페이지로 재이동시킨다.
로그인
login.jsp
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<script src="check.js"></script>
<% String id = (String)session.getAttribute("id"); %>
</head>
<body>
<div align="center">
<%
if(id == null){
%>
<h2>로그인</h2>
<form action="loginService.jsp" method="post" id="f">
<table>
<tr>
<td><input type="text" name="id" id="id" placeholder="아이디" maxlength=20></td>
</tr>
<tr>
<td><input type="password" name="pw" id="pw" placeholder="비밀번호" maxlength=20></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="로그인" onclick="checkLogin()">
<input type="reset" value="취소" onclick="location.href='index.jsp'">
</td>
</tr>
</table>
</form>
<%}else{ %>
<h3><%=session.getAttribute("name") %>님 환영합니다!</h3>
<%} %>
</div>
</body>
</html>
로그인 버튼에 onclick속성을 지정하였다.
버튼이 클릭될 때마다 checkLogin() 함수를 호출하여 id와 pw의 데이터가 빈 값인지 확인하고, 빈 값이 아니라면 form태그 내부의 데이터들을 loginCheck.jsp로 전달한다.
세션의 id속성 데이터의 유무(로그인 성공 시 세션에 id속성 데이터를 저장함)를 사용하여 로그인된 유저와 로그인되지 않은 유저의 화면을 다르게 설정하였다.
loginService.jsp
입력받은 id가 존재하고(""이 아니고) 해당 id를 갖는 멤버가 존재한다면, 입력받은 비밀번호와 멤버의 비밀번호를 비교한다.
로그인에 성공하면 멤버의 정보를 세션의 속성으로 저장한 후, 서버에 index페이지를 요청하여 유저를 이동시킨다.
로그인이 된 유저가 로그인 페이지에 입력했을 때 해당 회원의 이름을 출력할 것인데, 이때마다 DB에 접속하는 것을 방지하기 위해 이와 같이 작성하였다.
유저가 로그인에 실패하면 다시 로그인 페이지로 이동시킨다.
로그인된 유저와 그렇지 않은 유저의 header를 다르게 지정
<div align="right">
<hr>
<ul>
<li><a href="index.jsp">HOME</a></li>
<li><a href="register.jsp">Register</a></li>
<%if(session.getAttribute("id") == null){ %>
<li><a href="login.jsp">Login</a></li>
<%}else{ %>
<li><a href="userlist.jsp">memberList</a></li>
<li><a href="logout.jsp">Logout</a></li>
<%} %>
</ul>
<hr>
</div>
로그아웃
logout.jsp
로그인되지 않은 사용자가 직접 url을 통해 접근했을 경우에는 index 페이지로 이동시킨다.
그렇지 않다면 invalidate()를 호출한 세션에 저장된 모든 속성 데이터를 삭제하고 index페이지로 이동시킨다.
회원목록 확인
userlist.jsp
<html>
<head>
<meta charset="UTF-8">
<title>memberInfo</title>
<%
MemberDAO dao = new MemberDAO();
ArrayList<MemberDTO> members = dao.selectAll();
%>
</head>
<body>
<div align="center">
<h2>회원 목록</h2>
<table border="1">
<tr>
<th>아이디</th>
<th>이름</th>
<th>전화번호</th>
</tr>
<%if(!members.isEmpty()){
for(MemberDTO m : members){ %>
<tr>
<td onclick="location.href='userInfo.jsp?id=<%=m.getId()%>'"><%=m.getId() %></td>
<td><%=m.getName() %></td>
<td><%=m.getTel() %></td>
</tr>
<% }
}else{ %>
<tr>
<td colspan="3">회원이 존재하지 않습니다.</td>
</tr>
<%} %>
</table>
</div>
</body>
</html>
DB에 저장된 회원이 있다면 그 수만큼의 멤버의 필드 데이터를, 없다면 회원이 존재하지 않는다고 출력한다.
이때, 회원 아이디를 클릭하면 클릭된 td의 onclick속성에 따라 해당 아이디를 갖는 회원의 정보를 보여주는 userInfo페이지로 이동한다.
보여줄 회원의 정보를 불러오기 위해서는 회원을 식별할 수 있는 아이디가 필요하기 때문에, 쿼리 스트링으로 클릭된 아이디 값을 추가하여 서버에 userInfo페이지를 요청한다.
회원정보 확인
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<script src="check.js"></script>
<%
String id = (String)session.getAttribute("id");
if(id == null){
response.sendRedirect("login.jsp");
return;
}
if(!id.equals(request.getParameter("id"))){
response.sendRedirect("userlist.jsp");
return;
}
id = request.getParameter("id");
MemberDAO dao = new MemberDAO();
MemberDTO dto = dao.selectOne(id);
%>
</head>
<body>
<%@ include file="header.jsp" %>
<div align="center">
<h2>회원 수정</h2>
<form action="updateService.jsp" method="post" id="f">
<table>
<tr>
<td><input type="text" name="id" id="id" value="<%=dto.getId() %>" placeholder="아이디" readonly="readonly"></td>
</tr>
<tr>
<td><input type="password" name="pw" id="pw" placeholder="비밀번호"></td>
</tr>
<tr>
<td><input type="password" name="chkPw" id="chkPw" placeholder="비밀번호 확인"></td>
</tr>
<tr>
<td><input type="text" name="name" id="name" value="<%=dto.getName() %>" placeholder="이름"></td>
</tr>
<tr>
<td><input type="text" name="addr" id="addr" value="<%=dto.getAddr() %>" placeholder="주소"></td>
</tr>
<tr>
<td><input type="text" name="tel" id="tel" value="<%=dto.getTel() %>" placeholder="전화번호"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="회원수정" onclick="check()">
<input type="reset" value="취소" onclick="location.href='index.jsp'">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
로그인되지 않은 사용자가 직접 url을 통해 접근했을 경우에는 index 페이지로 이동시킨다.
그렇지 않다면 request url에 포함된 아이디라는 파라미터 값을 통해 특정 회원의 정보를 불러온다.
이때, 로그인된 사용자가 자기 자신이 아닌 다른 회원의 정보를 보려고 시도한다면 개인정보가 유출될 위험이 있기 때문에 userlist 페이지로 이동시킨다.
회원수정이나 삭제 버튼이 클릭되면, 쿼리 스트링으로 해당 회원의 아이디를 추가한 후 서버에 수정/삭제 페이지를 요청하여 수정/삭제 페이지로 이동시킨다.
회원정보 수정
update.jsp
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<script src="check.js"></script>
<%
String id = (String)session.getAttribute("id");
if(id == null){
response.sendRedirect("login.jsp");
return;
}
if(!id.equals(request.getParameter("id"))){
response.sendRedirect("userlist.jsp");
return;
}
id = request.getParameter("id");
MemberDAO dao = new MemberDAO();
MemberDTO dto = dao.selectOne(id);
%>
</head>
<body>
<%@ include file="header.jsp" %>
<div align="center">
<h2>회원 수정</h2>
<form action="updateService.jsp" method="post" id="f">
<table>
<tr>
<td><input type="text" name="id" id="id" value="<%=dto.getId() %>" placeholder="아이디" readonly="readonly"></td>
</tr>
<tr>
<td><input type="password" name="pw" id="pw" placeholder="비밀번호"></td>
</tr>
<tr>
<td><input type="password" name="chkPw" id="chkPw" placeholder="비밀번호 확인"></td>
</tr>
<tr>
<td><input type="text" name="name" id="name" value="<%=dto.getName() %>" placeholder="이름"></td>
</tr>
<tr>
<td><input type="text" name="addr" id="addr" value="<%=dto.getAddr() %>" placeholder="주소"></td>
</tr>
<tr>
<td><input type="text" name="tel" id="tel" value="<%=dto.getTel() %>" placeholder="전화번호"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="회원수정" onclick="check()">
<input type="reset" value="취소" onclick="location.href='index.jsp'">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
회원정보 수정 페이지도 회원가입 페이지와 비슷한 구조를 갖는다.
request url에 포함된 아이디 값을 통해 특정 회원의 정보를 불러온다.
회원 정보 수정도 로그인된 사용자가 자기 자신이 아닌 다른 회원의 정보를 보려고 시도한다면 userlist 페이지로 이동시킨다.
아이디는 기본키이므로 readonly 속성을 부여하여 읽기 전용 데이터로 설정하였다.
비밀번호, 이름, 주소, 전화번호는 모두 변경할 수 있다.
회원수정 버튼이 클릭되면 check()를 호출해 필수 값이 ""이 아닌지 정규 표현식을 만족시키는지를 확인한다.
조건을 모두 만족시킨다면 updateService로 이동한다.
updateService.jsp
서버의 2차 검증에 통과하고, 존재하는 회원이라면 해당 회원의 정보를 DTO객체에 담아 전달받는다.
입력받은 비밀번호, 이름, 주소, 전화번호로 회원 DTO객체의 값을 변경하고, 이를 DAO객체에 전달하여 DB에 반영한다.
회원 정보가 정상적으로 변경된 것을 확인할 수 있다.
회원탈퇴
delete.jsp
<html>
<head>
<meta charset="UTF-8">
<title>delete</title>
<script src="check.js"></script>
<%
String id = (String)session.getAttribute("id");
if(id == null){
response.sendRedirect("login.jsp");
return;
}
if(!id.equals(request.getParameter("id"))){
response.sendRedirect("userlist.jsp");
return;
}
%>
</head>
<body>
<div align="center">
<h2>회원 삭제</h2>
<form action="deleteService.jsp" method="post" id="f">
<table>
<tr>
<td>
<input type="hidden" name="id" id="id" value="<%=request.getParameter("id") %>">
<input type="password" name="pw" id="pw" placeholder="비밀번호">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="회원 탈퇴" onclick="checkPw()">
<input type="reset" value="취소" onclick="location.href='index.jsp'">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
request url에 포함된 아이디 값을 form태그의 hidden타입으로 추가하였다.
로그인된 회원이 자기 자신이 아닌 다른 회원을 탈퇴하려고 하면 userlist 페이지로 이동시킨다.
회원 탈퇴 버튼을 클릭하면 checkPw()가 호출되고, 입력한 비밀번호가 ""가 아니라면 deleteService로 이동한다.
deleteService.jsp
로그인되지 않은 사용자가 직접 url을 통해 접근했을 경우에는 index 페이지로 이동시킨다.
서버의 2차 검증에 통과하고, 존재하는 회원이라면 해당 회원의 정보를 DTO객체에 담아 전달받는다.
입력받은 비밀번호가 회원 비밀번호와 같다면 세션의 모든 데이터를 삭제한 후 DAO객체에 아이디를 전달해 DB에 저장된 해당 회원의 데이터를 삭제한다.
그렇지 않다면 index페이지나 delete페이지로 이동시킨다.
jny0527이라는 아이디를 갖는 회원이 정상적으로 탈퇴처리된 것을 확인할 수 있다.
로직이 궁금하시다면 첨부된 코드를 다운받으시면 됩니다.
'Jsp' 카테고리의 다른 글
| [jsp] EL(표현 언어) (0) | 2022.05.20 |
|---|---|
| [jsp] 액션 태그, 사용법 (0) | 2022.05.19 |
| [jsp 내장 객체] session 개념, 로그인 성공 시 아이디 저장 예제 (0) | 2022.05.12 |
| [jsp 내장 객체] pageContext, request, session, application의 Scope (0) | 2022.05.11 |
| [jsp] jsp 내장 객체: request (0) | 2022.05.10 |
