JSP 회원가입시 이메일 인증 절차 - (2/4) 이메일 정규식 검증

 인증메일이나 중복검사 전 정규식 검증을 하는 이유는?

 무의미한 단어가 나열될뿐인 문자열을 중복확인하고 인증메일을 보내는건 서버의 리소스 낭비이기 떄문입니다.

 

 

시권스 다이어그램

 

 

아래는 signUpForm.jsp의 일부입니다.

<form name="signUpForm" action="signUpInput.four" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
<table class="table" style="margin-left: auto; margin-right: auto;">

...

<tr>
	<th>이메일</th>
	<td><input type="text" name="email" id="inputEmailForm"  maxlength="30">
	<button onclick="emailAuthentication()" id="eamilAuthBtn" type="button" class="btnChk">인증 메일 보내기</button></td>
</tr>
<tr>
	<th rowspan="2"><a>인증번호 입력</a></th>
	<td colspan="2"><input type="text" name="authCode" id="inputAuthCode"  maxlength="10" disabled="disabled">
	<button onclick="authCodeCheck()" id="authCodeCheckBtn" type="button" disabled="disabled" class="btnChk">인증</button>
	<input type="hidden" name="authPass" id="authPass" value="false">
</td>
</tr>	

...

</table>

최초 인증번호 입력과 인증버튼이 Disable인 이유 

 이메일 인증이 되지않은 상태에서 사용자의 상호작용을 제한하기 위함입니다.

꼭 이렇게 하지 않아도 되며, 메일 인증의 결과를 저장해뒀다가 JS함수가 확인해 조건분기를 시켜도 됩니다.

 

 이는 나중에 포스팅에 자세히 기술하도록 하고, 인증메일 보내기 버튼을 보겠습니다.

인증메일 보내기 버튼은 emailAuthentication()를 호출하는데요, 코드는 다음과 같습니다.

<script type="text/javascript">

...

function emailAuthentication(){
	if (!emailValCheck()){
    	return false;
    }
	var url = "confirmEmail.four?email=" + document.signUpForm.email.value;
	open(url, "confirm",
			"toolbar=no, location=no,menubar=no,scrollbars=no,resizable=no,width=300,height=200");
}

...

</script>

emailAuthentication()의 기능

• emailValCheck() 호출 후 결과값 확인
• 결과값이 true라면 새 창에 email정보를 get방식으로 전송
• 결과값이 false라면 위의 기능을 실행하지 않음

 

 

 호출되는 emailValCheck()가 정규식으로 입력된 값이 유효한지 검사하게 됩니다.

<script type="text/javascript">

...

const form = document.signUpForm;

function emailValCheck(){
	var emailPattern= /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
	var email = form.email.value;
	if(!check(emailPattern, email, "유효하지 않은 이메일 주소입니다.")) {
		return false;
	}
    return true;
}


...

</script>

emailValCheck함수의 구조

• const form : email을 포함하는 form의 위치
• var emailPattern : 이메일 정규식 패턴
• check(pattern, taget, message)를 호출해 결과에 따라 새창을 띄웁니다.

check(pattern, taget, message)

<script type="text/javascript">

...


function check(pattern, taget, message) {
	if(pattern.test(taget)) {
    	return true;
    }
    alert(message);
    taget.focus();
    return false;
}

...

</script>

 

• 정규식 검증이 필요한 다른 항목에서도 사용가능하도록 만들어 코드 재사용성을 높임
• taget을 pattern으로 검사해 유효하면 ture 반환
• taget이 pattern에 맞지 않는다면?
  • alert로 message를 띄워 사용자에게 알림
  • 유요하지 않은 입력에 포커스를 줌
  • false 반환

굳이 focus를 해주는 이유?

 사용자로 하여금 잘못 입력된 부분을 찾는 수고를 덜어줍니다. (개발자가 귀찮고 힘들수록 사용자는 편해집니다...(피토))

 

 

 

 결과적으로, 정규식을 만족시키지 못한다면 이메일 중복확인 및 이메일 발송은 하지 않게 됩니다.

 반대로 정규식을 만족시킨다면 email을 get방식으로 request에 실어서 서버에 보내 이메일 중복검사를 시행하도록 합니다.

---

JSP 회원가입시 이메일 인증 절차 구현- (1) 시작하며
JSP 회원가입시 이메일 인증 절차 - (2) 이메일 정규식 검증
JSP 회원가입시 이메일 인증 절차 - (3) 이메일 중복 확인
JSP 회원가입시 이메일 인증 절차 - (4) 인증 이메일 전송