spring 회원가입 구현 1 - jsp에서 입력값 받기.

1. join.jsp

기본적인 아이디 비밀번호 이름 등을 정규식을 사용해 지정된 형식을 맞춰주었다. 

<form>태그를 통해 post방법으로 컨트롤러에 데이터를 보낸다, name의 값을 dto와 같은 값으로 설정해야 db에 저장이 된다. 

<form class="joinForm" action="/login/join" method="post" > 
<div class="box1">
	<div class="labelbox"><label for="userId">아이디*</label></div>
	<div class="box2">
		<input type="text" name="userId" id="userId">
		<input type="button" id="idbtn" name="idbtn" onclick="idcheck()" value="중복확인">
	</div>	
	<div class="msgbox">
		<span id="id_msg" style="font-size: 17px;"></span>	
	</div>	
</div>
 

<div class="box1">
	<div class="labelbox"><label for="userPw">패스워드*</label></div>	
	<div class= "box2">
		<input type="password" name="userPw" id="userPw">
	</div>
	<div class="msgbox">
		<span id="pw_msg" style="font-size: 17px;"></span>	
	</div>	
</div>

<div class="box1">
	<div class="labelbox"><label for="userPw_chk">패스워드 확인*</label></div>
	<div class="box2">
		<input type="password" name="userPw_chk" id="userPw_chk">
	</div>
	<div class="msgbox">
		<span id="pwchk_msg" style="font-size: 17px;"></span>	
	</div>	
</div>

<div class="box1">
	<div class="labelbox"><label for="userName">이름*</label></div>
	<div class="box2">
		<input type="text" name="userName" id="userName">
	</div>
	<div class="msgbox">
		<span id="name_msg" style="font-size: 17px;"></span>	
	</div>	
</div>

<div class="box1">
	<div class="labelbox"><label for="birth">생년월일*</label></div>
	<div class="box2">
		<input type="date" name="birth" id="birth">
	</div>	
	<div class="msgbox">
		<span id="birthMsg" style="font-size: 17px;"></span>	
	</div>	
</div>

 </form>
 
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){

	// FIXME: 필요 스크립트 전개 영역
    let checkID = RegExp(/^[a-z0-9]{6,20}$/);
    let checkPW = RegExp(/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/);
    let checkName = RegExp(/^[가-힣]{2,}$/);
    let checkPhone = RegExp(/^\d{3}\d{3,4}\d{4}$/);        
    let checkEmail = RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i);
         
    const target = document.getElementById('submit');
	$('#submit').attr('disabled', true); // 초기에 버튼을 비활성화 상태로 설정

	$('#userId').blur(function() {
		var userId = $('#userId').val();
	
		if(userId === ''){
			$('#id_msg').html('아이디를 입력해 주세요');	
			$('#id_msg').css('color','red');
			$('#submit').attr('disabled', true);
			return false;
			
		}else if(!checkID.test(userId)) {
			$('#id_msg').html("소문자,숫자를 포함한 6자리~20자리로 입력해주세요.");
			$('#id_msg').css('color','red');
			$('#submit').attr('disabled', true);   
            return false;
            
        }else if(checkID.test(userId)){
        	$('#id_msg').html("");
        	$('#submit').attr('disabled', false);
        	return true;
        }

    }); //$('#userId').blur end
		
	$('#userPw').blur(function() {
		var userPw = $('#userPw').val();
	
		if(userPw === ''){	
			$('#pw_msg').html('비밀번호를 입력해 주세요');
			$('#pw_msg').css('color','red');
			$('#submit').attr('disabled', true);
			return false;
		}else if(!checkPW.test(userPw)){
			$('#pw_msg').html('대소문자,특수문자 포함한 8자리~15자리로 입력해주세요');
			$('#pw_msg').css('color','red');
			$('#submit').attr('disabled', true);
			return false;
			
		}else if(checkPW.test(userPw)){
			$('#pw_msg').html("")                         
			$('#submit').attr('disabled', false);
        	return true;
		}
	}) //$('#userPw').blur ed
	
	$('#userPw_chk').blur(function() {
		var userPw = $('#userPw').val();
		var userPwChk = $('#userPw_chk').val();
	
		if(userPw != userPwChk){	
			$('#pwchk_msg').html('비밀번호가 일치하지 않습니다.');
			$('#pwchk_msg').css('color','red');
// 			$("#userPw_chk").focus();
			return false;
		}else if(userPwChk == ''){
			$('#pwchk_msg').html('비밀번호를 입력해주세요.');
			$('#pwchk_msg').css('color','red');
			return false;
		}else if(userPw === userPwChk){
			$('#pwchk_msg').html('비밀번호가 일치합니다');
			$('#pwchk_msg').css('color','#3f8ef7');
// 			$("#userName").focus();
			return true;			
		}
	}) //$('#userPw_chk').blur ed
	
	$('#userName').blur(function() {
		var userName = $('#userName').val();
	
		if(userName === ''){	
			$('#name_msg').html('이름을 입력해 주세요');
			$('#name_msg').css('color','red');
			$('#submit').attr('disabled', true);
			return false;
			
		}else if(!checkName.test(userName)){
			$('#name_msg').html('옳지않은 형식입니다.');
			$('#name_msg').css('color','red');
			$('#submit').attr('disabled', true);
			return false;
			
		}else{  
			$('#name_msg').html('');
			$('#name_msg').css('color','#3f8ef7');
			$('#submit').attr('disabled', false);
	    	return true;
		}
	}) //$('#userName').blur ed
    </script>

2. usersController

join메소드를 호출해준다. 회원가입이 성공하면 바로 로그인 할 수 있도록 로그인 페이지로 리다이렉트 처리 해준다.  

여기서 의문점 단순히 users를 가지고 메소드를 진행해도 괜찮은걸까?

리스트로 묶어서 했어야 하는건 아닐까? 

리다이렉트를 해주는 경우는 어떤경우에 해줘야 하는지.

// 회원가입 페이지 이동
@GetMapping("/join")
public void joinPage() {}

// 홈페이지 내에서 회원가입, 완료 후 메인페이지로이동
@PostMapping("/join")
public String userJoin(Users users) {
    logger.info("{}",users);
		
   //회원가입 메소드 호출
   usersService.join(users);	
   logger.info("회원가입 성공");

   return "redirect:/login/login";
} // userJoin() end

3.service나 dao에서도 메소드를 호출해주고 mapper에 insert문을 써서 db에 insert 가 되도록 해준다.

후에 포스팅 할 내용에 소셜 로그인이나 date 타입 insert를 쓸 예정이지만... 진짜 저 둘때문에 너무 애먹었다. DB는 다 NOT NULL 처리 되있고... date 타입 인서트 안된다고 오류 계속 뜨고 진짜 험난하다 험난해.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
<mapper namespace="com.kh.jaManChw.login.dao.face.UsersDao">
	  <insert id="insertUsers" parameterType="com.kh.jaManChw.dto.Users">
	  	INSERT INTO USERS(USERNO,USER_ID,USER_PW,USER_NICK,USER_NAME,BIRTH,GENDER,EMAIL,PHONE,ADDR1,ADDR2,ADDR3,GRADE,WARN_COUNT,STATUS,ROLE,PLATFORM_OPTION,SOCIALNUM)
	  	VALUES (USERS_SEQ.NEXTVAL,#{userId},#{userPw},#{userId},#{userName},#{birth},#{gender},#{email},#{phone},#{addr1},#{addr2},#{addr3},DEFAULT,DEFAULT,DEFAULT,DEFAULT,DEFAULT,#{socialNum}) 
	  </insert>
</mapper>