잡동사니에도 사랑을

[JSP] MVC활용(3) - 아이디 중복체크 / 회원가입 유효성 검사(mvcmember) 본문

JAVA_EE/MVC

[JSP] MVC활용(3) - 아이디 중복체크 / 회원가입 유효성 검사(mvcmember)

luvforjunk 2021. 10. 11. 16:15
728x90
반응형

[21.10.12] MVC활용(3) - 아이디 중복체크 / 회원가입 유효성 검사(mvcmember)

 

 

1. 아이디 중복체크

- 아이디의 값이 없으면 "먼저 아이디 입력" (<div id="idDiv">
- 아이디의 값이 있으면 window.open(), 딱 1개만
/mvcmember/member/checkId.do
CheckIdService.java
checkIdOk.jsp(사용 가능) 또는 checkIdFail.jsp (사용 불가능)


2. 회원가입 writeForm

- 유효성 검사 (이름, 아이디, 비밀번호, 재확인)
/mvcmember/member/write.do
WriteService.java
write.jsp

 

 

////////command.properties

# 회원가입
/member/write.do=member.service.WriteService
/member/checkId.do=member.service.CheckIdService
/member/checkPost.do=member.service.CheckPostService

 

 

////////write.jsp

<%@ 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>
<h3>회원가입을 축하합니다</h3>
<br>
<input type="button" value="로그인" onclick="location.href='/mvcmember/member/loginForm.do'">
</body>
</html>

 

 

////////checkIdOk.jsp

<%@ 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>
<h3>${requestScope.id }은(는) 사용 가능합니다</h3>
<input type="hidden" id="checkId" value="${requestScope.id }"> <!-- html안에서 변수 설정 -->
<br>
<input type="button" value="사용하기" id="checkIdClose">

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/member.js"></script>
<script type="text/javascript">
/* $('#checkIdClose').click(function(){
	alert('${requestScope.id }');
}); */
</script>
</body>
</html>

 

 

////////checkIdFail.jsp

<%@ 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>
	<h3>${requestScope.id }이미 사용 중인 아이디입니다</h3>
	<br>
	<form action="/mvcmember/member/chekcId.do">
		아이디 <input type="text" name="id"> 
			 <input type="submit" value="중복체크">
	</form>
</body>
</html>

 

 

////////member.js

$(function(){
	//회원가입
	$('#writeBtn').click(function(){
		$('#nameDiv').empty();
		$('#idDiv').empty();
      	$('#pwdDiv').empty();
      	$('#repwdDiv').empty();

		//name 속성
		if($('input[name="name"]').val() == '') {
			$('#nameDiv').html('이름 입력');
			$('#name').focus();
		}else if($('input[name="id"]').val()=='')
			$('#idDiv').html('아이디 입력');
		else if($('input[name="pwd"]').val()=='')
			$('#pwdDiv').html('비밀번호 입력');
		else if($('input[name="pwd"]').val() != $('input[name="repwd"]').val())
			$('#repwdDiv').html('비밀번호 틀림');
		else 
			$('form[name="writeForm"]').submit();
	});
	
	//로그인
	$('#loginBtn').click(function(){
		$('#idDiv').empty();
      	$('#pwdDiv').empty();

		if($('input[name="id"]').val()=='')
			$('#idDiv').html('아이디 입력');
		else if($('input[name="pwd"]').val()=='')
			$('#pwdDiv').html('비밀번호 입력');
		else 
			$('form[name="loginForm"]').submit();
	});
});

//우편번호


//아이디 중복 체크
$('#checkIdBtn').click(function(){
	//var id = document.getElementById("id").value;
	var id = $('#id').val();
	if(id == "")
		alert("먼저 아이디를 입력하세요");
	else
		window.open("/mvcmember/member/checkId.do?id="+id, "checkId", "width=400 height=200 top=200 left=700");	
});

$('#checkIdClose').click(function(){
	//alert($('#checkId').val());
	
	/************** 
	//opener.document.getElementById("id").value = $('#checkId').val();
	opener.writeForm.id.value = $('#checkId').val();
	window.close();
	opener.writeForm.pwd.focus();
	*****************/
	
	$('#id', opener.document).val($('#checkId').val());
	window.close();
	$('#pwd', opener.document).focus();
});

$('#zipcodeBtn').click(function(){
	window.open("/mvcmember/member/checkPost.do", "checkPost", "width=500 height=500 top=200 left=700");
});

 

 

////////CheckIdService.java

package member.service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.control.CommandProcess;

import member.dao.MemberDAO;

public class CheckIdService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
		//데이터
		String id = request.getParameter("id");
		
		//DB
		MemberDAO memberDAO = MemberDAO.getInstance();
		boolean exist = memberDAO.isCheckId(id);
				
		//응답
		request.setAttribute("id", id);
		if(exist)
			return "/member/checkIdFail.jsp"; //사용 불가능
		else
			return "/member/checkIdOk.jsp"; //사용 가능
		
	}

}

 

 

////////CheckPostService.java

package member.service;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.control.CommandProcess;

import member.bean.ZipcodeDTO;
import member.dao.MemberDAO;

public class CheckPostService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
		//데이터
		String sido = request.getParameter("sido");
		String sigungu = request.getParameter("sigungu");
		String roadname = request.getParameter("roadname");
		
		System.out.println(sido + ", " + sigungu + ", " + roadname);
		
		//DB
		List<ZipcodeDTO> list = null;
		if(sido != null && roadname != null) {
			MemberDAO memberDAO = MemberDAO.getInstance();
			list = memberDAO.getZipcodeList(sido, sigungu, roadname);
		}
		
		//응답
		request.setAttribute("list", list);
		return "/member/checkPost.jsp";
	}

}

 

728x90
반응형

'JAVA_EE > MVC' 카테고리의 다른 글

[JSP] MVC활용(5) - 게시판(mvcmember)  (0) 2021.10.14
[JSP] MVC활용(4) - 아이디 중복체크, 우편번호 검색(mvcmember)  (0) 2021.10.13
[21.10.08] MVC활용(2) - 로그인(mvcmember)  (0) 2021.10.11
[21.10.07] MVC활용(1) - 회원가입(mvcmember)  (0) 2021.10.09
'JAVA_EE/MVC' Related Articles more