[Spring] 회원가입 구현하기 - 2

안녕하세요~ 오늘은 저번 포스팅에 이어서 회원가입 페이지를 만들어 보겠습니다.

 

저번 포스팅을 건너뛰신 분들은 먼저 이전 글을 보고 오시면 감사하겠습니다.

2019/05/20 - [Programming/JAVA] - [Spring] 회원가입 구현하기 -1

[Spring] 회원가입 구현하기 -1

 

 

자 이렇게 화면이 나왔습니다. 

 

이메일 인증은 아래 글에서 확인하실 수 있습니다.

2019/05/09 - [Programming/JAVA] - [Spring] 이메일 발송 및 인증 방법

[Spring] 이메일 발송 및 인증 방법

function ValidationCheck() {
	var validate = true;
	var regExp = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;      // email 유효성검사
	var hanChecked = /^[가-힝a-zA-Z]{2,15}$/;      // 한글 유효성검사(2자리 이상 15자리 이하)
	var idChecked = /^[0-9a-zA-Z]{5,15}$/;      // 아이디 유효성검사(5자리 이상 15자리 이하)
	//var phoneChecked = /^[0-9-]{1,16}$/;
	var phoneChecked = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-([0-9]{3,4})-([0-9]{4})$/;

	if($("#${commandName} #userEmail").val()) {
		if(!regExp.test($("#${commandName} #userEmail").val())){
			alert("이메일 주소가 유효하지 않습니다");
			$("#${commandName} #userEmail").focus();
			return false;
		}
	}
	if($("#${commandName} #userPhone").val()) {
		if(!phoneChecked.test($("#${commandName} #userPhone").val())) {
			alert("전화번호가 잘못 되었습니다.");
			$("#${commandName} #userPhone").focus();
			return false;
		}
	}
	if(!$("#${commandName} #userId").val()) {
		alert("아이디를 입력 하세요.");
		$("#${commandName} #userId").focus();
		validate = false;
		return false;
	}else if(!idChecked.test($("#${commandName} #userId").val())){
		alert("아이디는 5자 ~ 15자리 사이로 만들어주세요.");
		return false;
	}else
		if(!$("#${commandName} #userNm").val()) {
			alert("이름을 입력 하세요.");
			$("#${commandName} #userNm").focus();
			return false;
	}else if(!hanChecked.test($("#${commandName} #userNm").val())){
		alert("이름이 잘못 되었습니다.");
		$("#${commandName} #userNm").focus();
		return false;
	}else if(!$("#${commandName} #userEmail").val()) {
		alert("이메일을 입력하세요.");
		$("#${commandName} #userEmail").focus();
		return false;
	}else if(!$("#emailAuth").val()){
		alert("이메일 인증을 완료해주세요.");
		$("#emailAuth").focus();
		return false;
	}else if($("#emailAuthBtn")[0].disabled == false){
		console.log($("#emailAuthBtn")[0].disabled);
		alert("이메일 인증을 완료해주세요.");
		$("#emailAuth").focus();
		return false;
	}else if(!$("#${commandName} #userPw").val()) {
		alert("비밀번호를 입력하세요.");
		$("#${commandName} #userPw").focus();
		return false;
	}else if($("#${commandName} #userPw").val().length > 16 || $("#${commandName} #userPw").val().length < 8) {
		alert("비밀번호는  8 ~ 16 자리로 입력해주세요.");
		return false;
	}else if(!$("#${commandName} #userPw2").val()) {
		alert("비밀번호 확인을 입력하세요.");
		$("#${commandName} #userPw2").focus();
		return false;
	}else if($("#${commandName} #userPw").val() != $("#${commandName} #userPw2").val()) {
		alert("비밀번호가 일치 하지 않습니다.");
		$("#${commandName} #userPw2").focus();
		return false;
	}else if(!$("#${commandName} #userFirstAddr").val()) {
		alert("주소를 클릭하여 선택해 주세요");
		$("#${commandName} #userZipCode").focus();
		return false;
	}else if(!$("#${commandName} #userSecondAddr").val()) {
		alert("나머지 주소를 입력 해 주세요");
		$("#${commandName} #userSecondAddr").focus();
		return false;
	}else{
		return true;
	}
}

자 일단 부적합한 데이터를 입력하는걸 방지하기 위해서 유효성 검사를 해줘야 합니다. 

 

유효성 검사를 해줬으면 아이디가 이미 가입이 되어있는 아이디인지 확인하기 위해 중복 체크를 해줍니다.

function onblur_event(){ 
	if(!$.trim($("#userId").val())){
		$("#createIdSpan").css("color", "red").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "235px").css("float", "left");
		$(".createIdSpan").html("아이디를 입력하세요.").promise().done(function(){
			$(".createIdSpan").slideDown("fast");
			$(this).effect("shake", {times:15,distance:3,direction:"up"}, 300);
		});
		return false;
	}
	if ($("#${commandName} #userId").val() != "") {
		var idChecked = /^[0-9a-zA-Z]{5,15}$/; // 아이디 유효성검사(5자리 이상 15자리 이하)
		if (!idChecked.test($("#${commandName} #userId").val())) {
			$("#createIdSpan").css("color", "red").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "235px").css("float", "left");
			document.getElementById("createIdSpan").innerHTML = "아이디는 5자 ~ 15자리 사이로 만들어주세요.";
			return false;
		}
	}
	$.ajax({
		type:"get",
		url : "<c:url value='/login/createIdCheck.do'/>",
		data : "userId=" + $("#userId").val(),
		dataType: "json",
		success : function(data){
			if(data.resultCode == "CM0011"){
				$("#createIdSpan").css("color", "blue").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "235px").css("float", "left");
				$(".idSuccess").remove();
				document.getElementById("createIdSpan").innerHTML = data.resultMessage;
			}
			if(data.resultCode == "CM0012"){
				$("#createIdSpan").css("color", "red").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "270px").css("float", "left");
				document.getElementById("createIdSpan").innerHTML = data.resultMessage;
				$("#userId").val("");
			}
		},
		error: function(data){
			alert("에러가 발생했습니다.");
			return false;
		}
	})
}

비동기 통신으로 아이디 중복체크를 해줍니다.

@RequestMapping(value="/createIdCheck.do", method=RequestMethod.GET)
@ResponseBody
public JSONObject createIdCheck(@RequestParam String userId, Model model){
	JSONObject json = new JSONObject();
	int cnt = -1;
	cnt = userService.createIdCheck(userId);
	if(cnt <= 0){
		json.put(FrontBackErrorCode.RESULT_CD, FrontBackErrorCode.CM0011);
		json.put(FrontBackErrorCode.RESULT_MESSAGE, FrontBackErrorCode.CM0011_MSG);
		return json;
	}else{
		json.put(FrontBackErrorCode.RESULT_CD, FrontBackErrorCode.CM0012);
		json.put(FrontBackErrorCode.RESULT_MESSAGE, FrontBackErrorCode.CM0012_MSG);
		return json;
	}
}

중복체크를 위한 컨트롤러를 만들어줍니다.

package com.co.kr.login.service;

import java.util.Map;

import javax.validation.Valid;

import com.co.kr.login.vo.UserAuthVo;
import com.co.kr.login.vo.UserVo;

public interface UserService {
	public int createIdCheck(String userId);
	
}

package com.co.kr.login.dao;

import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Repository;

import com.co.kr.common.dao.AbstractDAO;
import com.co.kr.common.vo.ExcludePageVo;
import com.co.kr.login.vo.UserAuthVo;
import com.co.kr.login.vo.UserVo;

@Repository
public class UserDao extends AbstractDAO{
	
	private final String PREFIX = "userMapper.";
	
	public int createIdCheck(String userId){
		return (int) selectOne(PREFIX + "createIdCheck", userId);
	}
	
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="userMapper">

	<select id="createIdCheck" resultType="int" parameterType="String">
		SELECT COUNT(USER_ID) FROM USER_INFO
			WHERE USER_ID = #{value}
		
		/* com.co.kr.login.dao.createIdCheck */
	</select>
	
</mapper>

ServiceImpl, Service, DAO, Mapper에서 중복 체크를 위한 로직을 만들어 주겠습니다.

 

데이터베이스에서 사용하려는 아이디를 검색해서 카운트가 1 이상이면 사용중인 아이디가 존재한다는 뜻입니다.

 

 

아이디가 중복일 시 위의 화면처럼 표시됩니다.

 

글이 너무 길어지는 것 같으니 다음 포스팅에서 이어 설명하겠습니다.