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

순서

1. span 태그 추가

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

3. 메서드 적용

4. 테스트

1. span 태그 추가

이메일 형식이 올바르지 않을 때 뜨는 경고글입니다.

클래스 속성명을 mail_input_box_warn으로 하였습니다.

위치는 클래스 속성명 final_mail_ck 인 span태그 바로 아래에 추가해줍니다.

<span class="mail_input_box_warn"></span>

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

이메일 형식 검사 메서드에 JavaScript에서 제공하는 test() 메서드를 사용했습니다.

해당 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다.

 

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

 

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

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

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

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);
}

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

3. 메서드 적용

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

 

코드들은 작성한 '인증번호 이메일 전송' 메서드 내부에 추가합니다.

추가한 span 태그를 사용하기 편하도록 변수를 추가합니다.

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

앞서 만들었던 mailFormCheck(이메일 형식 검사) 메서드를 제어문으로 하는 if문을 사용하여 이메일 형식 검사를 하는 코드를 작성합니다.

mailFormCheck의 인자로는 인증번호 이메일 전송 메서드에서 선언한 email 변수(입력한 이메일)를 사용합니다.

 

위치는 변수와 ajax 코드 사이입니다.

/* 이메일 형식 유효성 검사 */
if(mailFormCheck(email)){
   warnMsg.html("이메일이 전송 되었습니다. 이메일을 확인해주세요.");
   warnMsg.css("display", "inline-block");
} else {
   warnMsg.html("이메일을 형식에 맞게 입력해주세요. abc@xyz.com");
   warnMsg.css("display", "inline-block");
   return false;
}

코드를 해석해보면, 올바른 이메일 형식으로 작성된 이메일이면 mailFormCheck()가 true를 반환하여 정상적인 이메일이 보내졌다는 경고글이 뜨게 됩니다.

 

올바르지 못한 형식의 이메일을 입력할 시엔 올바르지 못하다는 경고글과 함께 if문 다음 코드인 ajax가 실행이 되지 않도록 return false를 작성하여 인증번호 이메일 전송 메서드를 벗어납니다.

4. 테스트

올바른 형식의 이메일 입력

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