자주 사용하는 예제로 알아보는 정규 표현식 (E-mail)

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

자바스크립트 정규식을 활용하여 E-mail 주소가 맞는지 아닌지 판단해 보는 소스입니다.

 

자바스크립트

function check_email() {

  var email = document.getElementById("email").value;


  var regEmail= /^[A-z0-9]{2,20}+@[A-z]{2,20}+\.[a-z]{2,3}$/;

  if (regEmail.test(email) == true) {

    alert("E-mail주소가 맞습니다.");

  }

}

 

HTML

<input type="text" id="email" name="email" />

<input type="button" onclick="check_email()" value="이메일 주소 확인" />

 

▶ regEmail에 작성한 정규식을 알아봅시다.

  → ^[A-z0-9]{2,20} : 대문자 A부터 소문자 z와 숫자 중 시작하는 2자리에서 20자리입니다.

  → +@ : @ 한번 존재해야 합니다. 

  → [A-z]{2,20} : 대문자 A부터 소문자 z까지의 2자리에서 20자리입니다. 

  → +\. :  닷(.) 혼자 사용할 수 없어 역슬래시(\) 와 같이 사용합니다. 닷(.) 한번 존재해야 합니다.

  → [a-z]{2,3}$ : 마지막은 2자리에서 4자리의 소문자 a부터 z까지입니다.

 

위 조건을 만족하면 regEmail.test(email)를 통과하여 true라는 값을 반환하여 alert를 보여 줍니다. 

 

regEmail에 작성한 정규식의 다른 표현

var regEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;

var regEmail = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;

 

아래 사이트는 정규식을 테스트 할 수 있는 사이트입니다.

https://regexr.com/

RegExr: Learn, Build, & Test RegEx