<스프링 Spring> 회원가입 시 이메일 주소 가져오기

- 회원가입 시 입력된 이메일 주소 가져오기

이메일을 3개의 칸(사용자 이메일의 아이디, @, 도메인 주소)으로 나누어 입력하면 해당 정보를 가져와 DB에 1개의 이메일 주소로 합쳐서 저장할 수 있는 방법이다. 여러 자료를 찾아보니 이 기능에 관련된 자료는 없는 것 같아 직접 코드를 작성해보았다. 순서는 다음과 같다.

 

 

1) 회원가입 폼에 다음과 같이 코드를 만든다.

<form name="join" method="post" action="join" autocomplete="off" encType="utf-8">
	<!-- 중략 -->
	<h3>이메일</h3>
	<input type="text" id="user_email" required><span id="middle">@</span><input type="text" id="email_address" list="user_email_address">
		<datalist id="user_email_address">
			<option value="naver.com"></option>
			<option value="daum.com"></option>
			<option value="google.com"></option>
			<option value="직접입력"></option>
		</datalist>
		<input type="hidden" id="totalemail" name="email" value="">
	<!-- 중략 -->
	<input type="submit" id="signup" value="회원가입">
</form>

이메일 칸을 3개로 구분지어 만든다. 첫번째는 사용자의 이메일 주소 중 아이디를 넣을 수 있는 칸(id="user_email"), 두번째는 태그 사이에 들어가는 span태그로, @ 기호만 html로 입력해준다(사용자 입력X). 세번째는 사용자의 이메일 주소 중 도메인 주소를 넣을 수 있는 칸(id="email_address")이다.

 

세번째 도메인 주소의 경우에는 datalist의 태그를 이용하여 간편하게 도메인 주소를 입력할 수 있도록 바로 아래 옵션으로 넣어주었다. 이 중 사용자가 선택한 값이 이메일 주소로 입력된다.

 

마지막으로, 위의 3개의 입력값을 하나의 이메일 주소로 합칠 수 있도록 input 태그를 하나 더 만들고, 사용자에게 노출되는 부분은 아니므로 hidden 타입으로 숨겨주되, 서버에 전송 시 이 값이 사용자의 이메일 주소 값임을 알 수 있도록 DB에서 사용자 정보 중 email에 해당하는 컬럼명을 name의 값으로 넣어준다(id="totalemail").

 

 

2) 자바스크립트에서 제이쿼리를 사용하여 이메일 항목의 세 값을 합쳐준다.

	//이메일주소 가져오기
	$("#user_email").blur(function(){
		email();	
	});
	
	$("#email_address").change(function(){
		email();	
	});

	function email() {
		const email = $("#user_email").val();
		const middle = $("#middle").text();
		const address = $("#email_address").val();
		if(email != "" && address != "") {
			$("#totalemail").val(email+middle+address);
		}
	};

사용자가 input에 입력한 세 개의 값을 가져오되, 사용자 이메일 주소의 아이디와 도메인 주소는 val() 메서드를 사용하고 @ 기호의 경우에는 html으로 입력했으므로 html() 혹은 text()로 가져온다. 그리고 각각 변수에 저장한다.

 

그리고 if 조건문을 통해 이 값들을 검토하여 빈칸이 아니면, 세 개의 값을 합치도록 한다. 앞서 작성했던 회원가입 폼 jsp에서 마지막으로 세 개의 값을 합친 값을 넣는 totalemail에 합친 값을 넣는다.

 

그리고 위 사항들을 내포한 함수는 각각 사용자 이메일 주소의 아이디와, 도메인 주소가 입력되었을 때의 이벤트가 발생했을 때 실행되도록 한다. 상단 두 개의 이벤트는 각각 다른 것으로 설정하였는데, 둘 다 blur 이벤트로 하거나, 둘 다 change 이벤트로 설정하여도 무방하다. blur 이벤트는 사용자가 폼에 입력을 마치고 커서가 해당 폼을 벗어났을 때 실행되며, change 이벤트는 폼에 변화가 감지되었을 때 실행된다.

 

 

- 주의할 점

1) js 코드를 외부 파일로 작성할 때에 다음 코드를 jsp에 꼭 넣어준다.

<script type="text/javascript" src="js파일경로"></script>

 

2) jsp페이지의 상단에 JQuery 설정을 꼭 해주도록 한다. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>