[ Spring ] 회원가입 유효성 검사 및 성공·실패 여부 - (3) 회원가입

 

회원가입 유효성 검사

 

1. 회원가입 화면

📑 join.jsp

-html

<form name="frm" action="${contextPath}/memRegister.do" method="post">
     <input type="hidden" id="memPassword" name="memPassword" value=""/>
     <table class="table table-bordered" style="text-align: center; border: 1px solid #dddddd;">
       <tr>
         <td style="width: 110px; vertical-align: middle;">아이디</td>
         <td><input id="memID" name="memID" class="form-control" type="text" maxlength="20" placeholder="아이디를 입력하세요."/></td>
         <td style="width: 110px;"><button type="button" class="btn btn-primary btn-sm" onclick="registerCheck()">중복확인</button></td>
       </tr>
       <tr>
         <td style="width: 110px; vertical-align: middle;">비밀번호</td>
         <td colspan="2"><input id="memPassword1" name="memPassword1" onkeyup="passwordCheck()" class="form-control" type="password" maxlength="20" placeholder="비밀번호를 입력하세요."/></td>            
       </tr>
       <tr>
         <td style="width: 110px; vertical-align: middle;">비밀번호확인</td>
         <td colspan="2"><input id="memPassword2" name="memPassword2" onkeyup="passwordCheck()" class="form-control" type="password" maxlength="20" placeholder="비밀번호를 확인하세요."/></td>            
       </tr>
        <tr>
         <td style="width: 110px; vertical-align: middle;">사용자 이름</td>
         <td colspan="2"><input id="memName" name="memName" class="form-control" type="text" maxlength="20" placeholder="이름을 입력하세요."/></td>            
       </tr>
       <tr>
         <td style="width: 110px; vertical-align: middle;">나이</td>
         <td colspan="2"><input id="memAge" name="memAge" class="form-control" type="number" maxlength="20" placeholder="나이를 입력하세요."/></td>            
       </tr>
       <tr>
         <td style="width: 110px; vertical-align: middle;">성별</td>
         <td colspan="2">
            <div class="form-group" style="text-align: center; margin: 0 auto;">
                <div class="btn-group" data-toggle="buttons">
                   <label class="btn btn-primary active">
                     <input type="radio"  name="memGender" autocomplete="off" value="남자" checked/>남자
                   </label>
                    <label class="btn btn-primary">
                     <input type="radio"  name="memGender" autocomplete="off" value="여자"/>여자
                   </label>
                </div>                    
            </div>
         </td>            
       </tr> 
       <tr>
         <td style="width: 110px; vertical-align: middle;">이메일</td>
         <td colspan="2"><input id="memEmail" name="memEmail" class="form-control" type="text" maxlength="20" placeholder="이메일을 입력하세요."/></td>            
       </tr>
       <tr>
         <td colspan="3" style="text-align: left;">
            <span id="passMessage" style="color: red"></span><input type="button" class="btn btn-primary btn-sm pull-right" value="등록" onclick="goInsert()"/>
         </td>             
       </tr>
     </table>
  </form>

 

1) form을 통해 전달할 값에 name(실제 데이터로 넘어갈 값)과 id(유효성 검사를 위한 값) 속성을 추가한다.

1) 유효성 검사 후 회원가입이 실행되기 위해  <button type="button"> 으로 설정한다. 

2) 버튼 클릭시 onclick="함수명" 을 속성으로 함수가 실행된다.

 

2. 유효성 검사 결과 출력 팝업

-html

<div id="myModal" class="modal fade" role="dialog" >
  <div class="modal-dialog">	
    <!-- Modal content-->
    <div id="checkType" class="modal-content panel-info">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">메세지 확인</h4>
      </div>
      <div class="modal-body">
        <p id="checkMessage"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>	
  </div>
</div>

1)  검사 결과 부적합 시 모달 창으로 에러 메세지를 출력한다.

 

 

3. 유효성 검사 구현

- javascript

function goInsert(){
    var getCheck= RegExp(/^[a-zA-Z0-9]{4,12}$/);//비밀번호
    var getName= RegExp(/^[[a-zA-Z가-힣]+$/);//이름
    var getMail = RegExp(/^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/);//이메일
    var fmt = RegExp(/^\d{6}[1234]\d{6}$/); //형식 설정
    var buf = new Array(13); //주민등록번호 배열
    
    ...
    
}

1) 버튼 클릭시 실행될 함수 goInsert()

2) 정규식을 변수에 넣어 사용한다.

 

if($("#memID").val() == "" || ! $("#memID").hasClass("active")){
    $("#checkMessage").html("아이디를 확인하세요.");
    $("#myModal").modal("show");
  return false;
}

3) 아이디 공백 확인

 

if($("#memID").val() == $("#memPassword").val()){
    $("#checkMessage").html("아이디와 비밀번호가 같습니다.");
    $("#myModal").modal("show");
    $("#memPassword").val("");
    $("#memPassword1").val("");
    $("#memPassword2").val("");
    $("#memPassword").focus();
  return false;
}

4) 아이디 비밀번호 같음 확인

 

if($("#memPassword").val() == ""){
    $("#checkMessage").html("비밀번호를 확인하세요.");
    $("#myModal").modal("show");
    $("#memPassword").val("");
    $("#memPassword1").val("");
    $("#memPassword2").val("");
  return false;
}

5) 비밀번호 공백 확인

 

if(!getCheck.test($("#memPassword").val())){
    $("#checkMessage").html("비밀번호를 올바르게 입력해주세요.");
    $("#myModal").modal("show");
    $("#memPassword").val("");
    $("#memPassword1").val("");
    $("#memPassword2").val("");
  return false;
}

6) 비밀번호 유효성검사

 

if($("#memName").val() == ""){
    $("#checkMessage").html("이름을 입력해주세요.");
    $("#myModal").modal("show");
  return false;
}

7) 이름 공백 검사

 

if(!getName.test($("#memName").val())){
    $("#checkMessage").html("이름을 올바르게 입력해주세요.");
    $("#myModal").modal("show");
    $("#memName").val("");
  return false;
}

8) 이름 유효성 검사

 

if($("#memAge").val() == ""){
    $("#checkMessage").html("나이를 올바르게 입력해주세요.");
    $("#myModal").modal("show");
  return false;
}

9) 나이 공백 검사

 

if($("#memEmail").val() == ""){
    $("#checkMessage").html("이메일을 입력해주세요.");
    $("#memEmail").modal("show");
  return false;
}

10) 이메일 공백 확인

 

if(!getMail.test($("#memEmail").val())){
   $("#checkMessage").html("이메일을 올바르게 입력해주세요.");
   $("#myModal").modal("show");
   $("#memEmail").val("");
   return false;
 }

11) 이메일 유효성 검사

 

document.frm.submit();

12) form에 name 값 전송

 

 

3. 실제 회원가입이 실행되는 부분

 

📑 MemberController.java

@RequestMapping("/memRegister.do")
public String memRegister(Member m, String memPassword1, String memPassword2,
                          RedirectAttributes rttr, HttpSession session) {
    ...
}

1) Member : Form으로부터 전달 받는 객체 (Modal)

2) memPassword1, memPassword1 : 패스워드 유효성 검사를 위해 사용한 변수

3) RedirectAttributes : 회원가입 실패시 Body(join.jsp)로 다시 전달할 메시지를 담는 객체 (객체 바인딩)

4) HttpSession : 회원가입 성공 시 Session에 저장에 성공한 객체를 저장

 

if(m.getMemID()==null || m.getMemID().equals("") ||
   memPassword1==null || memPassword1.equals("") ||
   memPassword2==null || memPassword2.equals("") ||
   m.getMemName()==null || m.getMemName().equals("") ||	
   m.getMemAge()==0 ||
   m.getMemGender()==null || m.getMemGender().equals("") ||
   m.getMemEmail()==null || m.getMemEmail().equals("")) {
   // 누락메세지를 가지고 가기? =>객체바인딩(Model, HttpServletRequest, HttpSession)
   rttr.addFlashAttribute("msgType", "실패 메세지");
   rttr.addFlashAttribute("msg", "모든 내용을 입력하세요.");
   return "redirect:/memJoin.do";  // ${msgType} , ${msg}
}

5) 객체에 들어갈 값이 null 혹은 빈 값으로 왔을 경우, 회원가입 페이지로 실패 메시지 전달 

- addFlashAttribute : 한번만 전달할 값을 저장

- redirect 로 join.jsp로 다시 보내준다.

 

m.setMemProfile(""); // 사진이미는 없다는 의미 ""
// 회원을 테이블에 저장하기
int result=memberMapper.register(m);

6) 회원정보에 프로필정보가 있는데 회원가입시 저장하고 있지 않기때문에 null값 대신 빈 값이 들어갈 수 있도록 추가

7) 회원정보를 저장하는 SQL 인설트문을 interface 메서드를 통해 실행

 

if(result==1) { // 회원가입 성공 메세지
   rttr.addFlashAttribute("msgType", "성공 메세지");
   rttr.addFlashAttribute("msg", "회원가입에 성공했습니다.");
   // 회원가입이 성공하면=>로그인처리하기
   session.setAttribute("mvo", m); // ${!empty mvo}
   return "redirect:/";
}else {
   rttr.addFlashAttribute("msgType", "실패 메세지");
   rttr.addFlashAttribute("msg", "이미 존재하는 회원입니다.");
   return "redirect:/memJoin.do";
}

8) 회원 가입 성공 시 메인 페이지로 메시지 전달 

9) 회원 가입 실패 시 회원가입 페이지로 메시지 전달

 

 

---

 

회원가입 성공·실패 여부

 

1. 회원가입 실패

📑 join.jsp

- javascript

$(document).ready(function(){
    if(${!empty msgType}){
        $("#messageType").attr("class", "modal-content panel-warning");    
        $("#myMessage").modal("show");
    }
});

1) 회원가입 페이지 로딩시 메시지 전달 값이 있는지 확인 후 실패 메시지 출력

- empty를 사용해 값이 있는지 없는지 여부를 확인한다.

 

- html

<div id="myMessage" class="modal fade" role="dialog" >
  <div class="modal-dialog">	
    <!-- Modal content-->
    <div id="messageType" class="modal-content panel-info">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">${msgType}</h4>
      </div>
      <div class="modal-body">
        <p>${msg}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>	
  </div>
</div>

2) java로 부터 받아온 메시지 값을 el문을 통해 넣어준다.

 

2. 회원가입 성공

📑 index.jsp

- javascript

$(document).ready(function(){
    if(${!empty msgType}){
        $("#messageType").attr("class", "modal-content panel-success");    
        $("#myMessage").modal("show");
    }
});

1) 메인페이지 로딩시 메시지 전달 값이 있는지 확인 후 성공 메시지 출력

 

- html

<div id="myMessage" class="modal fade" role="dialog" >
  <div class="modal-dialog">	
    <!-- Modal content-->
    <div id="messageType" class="modal-content panel-info">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">${msgType}</h4>
      </div>
      <div class="modal-body">
        <p>${msg}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>	
  </div>
</div>

2) java로 부터 받아온 메시지 값을 el문을 통해 넣어준다.