본문 바로가기
수업(국비지원)/JSP

[JSP] MVC MODEL2 방식 - 아이디 중복체크(joinForm, idchk)

by byeolsub 2023. 4. 20.

📌

  • joinForm.jsp 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- /jsp3/src/main/webapp/view/member/joinForm.jsp --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="../css/main.css">
<script type="text/javascript">
      function check(f) {
    	  if(f.id.value == '') {
    		  alert("아이디를 입력하세요.")
    		  f.id.focus()
    		  return false //submit 버튼 클릭의 기능을 중지시키는 역할
    	  }
    	  if(f.pass.value == '') {
    		  alert("비밀번호를 입력하세요.")
    		  f.pass.focus()
    		  return false 
    	  }
    	  if(f.name.value == '') {
    		  alert("이름을 입력하세요.")
    		  f.name.focus()
    		  return false
    	  }
    	  return true
      }
      function win_open() {
    	  let op = "width=300,height=300,left=50,top=150"
    	  open("memberimg","",op)
      }
      function idchk() {
    	  if(document.f.id.value =='') {
    		  alert("아이디를 입력하세요.")
    		  f.id.focus()
    	  } else {
    		  let op = "width=500, height=200,left=50,top=150"
    		  open("idchk?id=" + document.f.id.value,"",op)
    	  }
      }
</script>
</head>
<body>
<%-- type="hidden" : 값은 존재. 화면 없음. 파라미터값으로 서버에 전달 --%>
<form action="join" method="post" name="f" onsubmit="return check(this)">
    <input type="hidden" name="picture" value="">
    <table>
    <caption>회원 가입</caption>
    <tr><td rowspan="4" align="center" valign="bottom">
        <img src="" width="100" height="120" id="pic"><br>
        <%-- javascript:win_open() <= 자바스크림트 파일로 실행해. 라는 뜻이 된다. --%>
        <font size="1"><a href="javascript:win_open()">사진 등록</a>
        </font></td>
        <td>아이디</td>
        <td><input type="text" name="id" style="width:77%;">
            <input type="button" value="중복확인" onclick="idchk()"></td>
        </tr>
        <tr><td>비밀번호</td>
        <td><input type="password" name="pass"></td></tr>
        <tr><td>이름</td>
        <td><input type="text" name="name"></td></tr>
        <tr><td>성별</td>
        <td><input type="radio" name="gender" value="1" checked>남
            <input type="radio" name="gender" value="2" checked>여</td></tr>
        <tr><td>전화번호</td>
        <td colspan="2"><input type="text" name="tel"></td></tr>
        <tr><td>이메일</td>
            <td colspan="2"><input type="text" name="email"></td></tr>
        <tr><td colspan="3" align="center">
            <input type="submit" value="회원가입">
            <%-- type="reset" : 화면을 초기화면으로 설정. 입력된 내용 전부 초기화 --%>
            <input type="reset" value="다시작성">
            </td></tr>    
    </table>
</form>
</body>
</html>
  • idchk.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- /jsp3/src/main/webapp/view/member/idchk.jsp --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 검색</title>
<link rel="stylesheet" href="../css/main.css">
<style type="text/css">
     .able { color:green; font-size: 15px; }
     .disable { color:red; font-size: 20px; }
</style>
</head>
<body>
<table>
<tr><td>아이디</td><td>${param.id}</td></tr>
<tr><td colspan="2"><div id="msg">${msg}</div></td></tr>
<tr><td clospan="2"><input type="button" value="닫기" onclick="self.close()"></td></tr>
</table>
<script>
 if(${able}) {
	 opener.document.f.id.style.color="green"
	 document.querySelector("#msg").setAttribute("class","able")
 } else {
	 opener.document.f.id.value=""
	 document.querySelector("#msg").setAttribute("class","disable")
 }
</script>
</body>
</html>

 

📌 MemberController.java 추가

//아이디 중복체그
	@RequestMapping("idchk")
	public String idchk (HttpServletRequest request, HttpServletResponse response) {
		String id = request.getParameter("id");
		MemberDao dao = new MemberDao();
		Member mem = dao.selectOne(id);
		if(mem == null) {
			request.setAttribute("msg","사용가능한 아이디 입니다.");
			request.setAttribute("able",true);
		} else {
			request.setAttribute("msg","사용 중인 아이디 입니다.");
			request.setAttribute("able",false);
		}
		return "/view/member/idchk.jsp";
	}