[Spring][쇼핑몰 프로젝트][7] 이메일 형식 유효성 검사

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

 이메일 형식을 검사하는 유효성 검사 메서드 제작 및 적용

 

 앞선 포스팅에서 큰 틀의 유효성 검사는 완성을 하였습니다. 이와 더불어 작은 부분에 유효성 검사를 적용할 부분들은 많습니다. 예를 들어서 아이디의 형식과 길이를 제한하도록 하는 유효성 검사들을 만들 수도 있습니다. 만들어질 수 있는 여러 유효성 검사들의 큰 맥락은 같기 때문에 이번 포스팅에선 이메일 형식 유효성 검사 한 개만 진행해 보겠습니다. 

 

 구현하고자 하는 이메일 형식 유효성 검사는 사용자가 "xxxxx@xxx.com"형식을 사용을 하는지 확인하는 것입니다. 올바른 형식의 이메일을 입력하고 [인증번호 전송] 버튼을 눌렀을 때는 인증번호가 정상적으로 보내졌다는 경고글과 함께 인증번호 전송이 이루어질 것입니다. 하지만 올바르지 않은 형식의 이메일을 입력을 하고 [인증번호 전송] 버튼을 눌렀을 땐 올바르지 않은 이메일이 입력되었다는 경고글과 함께 인증번호가 전송되지 않을 것입니다. 

 

순서

1. span 태그 추가

2. 이메일 형식 검사 메서드

3. 메서드 적용

4. 테스트

 

1. span 태그 추가

 이메일 형식이 올바르지 않을때 뜨는 경고글입니다. 클래스 속성명을 mail_input_box_warn으로 하였습니다. 위치는 클래스 속성명 final_mail_ck 인 span태그 바로 아래에 추가해줍니다.

 

 
<sapn class="mail_input_box_warn"></sapn>
 

 

그림 1

 

 

2. 이메일 형식 검사 메서드

 이메일 형식 검사 메서드에 자바스크립트에서 제공하는 test() 메서드를 사용할 것입니다. 해당 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다. test() 메서드에 대한 자세한 사항은 아래의 링크를 참고해주세요.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

 

 - 이름이 mailFormCheck이고 매개변수명이 email 인 메서드를 script 태그 내부에 작성합니다.

 

 
 /* 입력 이메일 형식 유효성 검사 */
 function mailFormCheck(email){
 
 
}
 

 

 

그림 2

 

 

 - 메서드 내에 이름이 form 인 변수를 선언하고 사용하고자 하는 정규표현식(이메일 형식 검사)으로 초기화합니다.

 

 
 /* 입력 이메일 형식 유효성 검사 */
 function mailFormCheck(email){
    var form = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
 
}
 

 

그림 3

 

 

 - return으로 아래의 코드를 추가합니다. 

 

 
 /* 입력 이메일 형식 유효성 검사 */
 function mailFormCheck(email){
    var form = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return form.test(email);
}
 

 

그림 4

 

 

 해석을 하면 매개변수 email이 form에 저장된 정규표현식에 부합할 경우 true를 부합하지 않을 경우 false를 반환하게 됩니다. 

 

 

3. 메서드 적용

 이메일 형식 유효성 검사를 하는 메서드를 만들었기 때문에 우리가 원하는 방식으로 작동이 되도록 메서드를 적용해야 합니다. 메서드는 언제 어떠한 상황에 작동을 원하느냐에 따라 매우 다양하게 적용이 가능합니다. 예를 들어서 우리가 만들었던 중복 아이디 검사와 같이 입력 항목에 문자를 입력을 할 때마다 작동하는 메서드를 활용할 수 있습니다.

 저는 이메일을 작성하고 인증번호 전송 버튼을 눌렀을 때 이메일 형식 검사를 진행하도록 만들 것입니다.

 

 - 추가할 코드들은 우리가 작성한 '인증번호 이메일 전송' 메서드 내부에 추가할 것입니다. 추가한 span 태그를 사용하기 편하도록 변수를 추가합니다.

 

 
var warnMsg = $(".mail_input_box_warn");    // 이메일 입력 경고글
 

 

그림 5

 

 

 - 앞서 만들었던 mailFormCheck(이메일 형식 검사) 메서드를 제어문으로 하는 if문을 사용하여 이메일 형식 검사를 하는 코드를 작성합니다. mailFormCheck의 인자로는 인증번호 이메일 전송 메서드에서 선언한 email 변수(입력한 이메일)를 사용합니다. 위치는 변수와 ajax 코드 사이에 추가합니다. 

 

 
    /* 이메일 형식 유효성 검사 */
    if(mailFormCheck(email)){
        warnMsg.html("이메일이 전송 되었습니다. 이메일을 확인해주세요.");
        warnMsg.css("display", "inline-block");
    } else {
        warnMsg.html("올바르지 못한 이메일 형식입니다.");
        warnMsg.css("display", "inline-block");
        return false;
    }    
 

 

그림 6

 

 

 코드를 해석해보면 올바른 이메일 형식으로 작성된 이메일이면 mailFormCheck()가 true를 반환하여 정상적인 이메일이 보내졌다는 경고글이 뜨게 됩니다. 올바르지 못한 형식의 이메일을 입력할 시엔 올바르지 못하다는 경고글과 함께 if문 다음 코드인 ajax가 실행이 되지 않도록 return false를 작성하여 인증번호 이메일 전송 메서드를 벗어납니다. 

 

 

4. 테스트

 - 올바른 형식의 이메일 입력

 

그림 7

 

 

 - 올바르지 않은 형식의 이메일 입력

 

그림 8

 

 

DATE

• 2020.12.07