JavaScript에서 Regex로 이메일 유효성 검사

Habdul Hazeez 2023년10월12일
  1. 2~3자 TLD 사이의 이메일을 확인하고 JavaScript의 이메일 및 도메인 이름에 문자를 허용하지 않음
  2. 2~6개의 TLD 이름 사이에서 이메일을 확인하고 JavaScript에서 더하기 로그인 이메일 이름을 허용하지 않음
  3. 이메일 확인 및 JavaScript의 이메일 및 도메인 이름에 숫자 및 유효한 문자 허용
  4. JavaScript에서 RFC 5322 형식으로 이메일 주소 확인
  5. 결론
JavaScript에서 Regex로 이메일 유효성 검사

이 기사에서는 다양한 유형의 이메일 주소를 검증할 수 있는 여러 정규 표현식에 대해 설명합니다. 따라서 사용 사례에 가장 적합한 패턴 중 하나를 수정하거나 선택할 수 있습니다.

2~3자 TLD 사이의 이메일을 확인하고 JavaScript의 이메일 및 도메인 이름에 문자를 허용하지 않음

2~3개의 TLD 사이의 이메일 주소를 허용하는 정규식을 작성할 수 있습니다. 예: .com.io.

이것은 또한 패턴이 다음 특성을 가진 이메일을 허용하지 않음을 의미합니다.

  1. 3자 TLD보다 긴 TLD(예: .mobi)
  2. 다중 TLD, 예. (.gmail.sa)
  3. 숫자가 포함된 도메인(예: tech125.com)
  4. 이메일 이름의 마침표(.) 또는 하이픈(-)
  5. 도메인 이름의 하이픈

아래 예제 코드에는 abc@gmail.com, hello@hello.comab0c@gmail.com과 같은 이메일 주소에 대해 true를 반환하는 정규식이 있습니다.

let pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;

function checkEmailAddress(email_address) {
  let result = pattern.test(email_address);
  console.log(result);
}

checkEmailAddress('abc@gmail.com')

출력:

true

한편 패턴은 다음 이메일 주소에 대해 false를 반환합니다.

ab0c@my-domain.com

2~6개의 TLD 이름 사이에서 이메일을 확인하고 JavaScript에서 더하기 로그인 이메일 이름을 허용하지 않음

정규식 패턴은 전자 메일 주소에서 마침표 기호(.)를 허용하고 더하기 기호(+)를 허용하지 않을 수 있습니다. 즉, 더하기 기호가 있는 이메일 주소는 정규식을 통과하지 않습니다.

따라서 유효하더라도 false를 반환합니다. 이 섹션에서 정의할 패턴은 다음과 같은 특성이 있는 이메일에 대해 false를 반환합니다.

  1. 더하기 기호(+)가 있는 이메일
  2. 6자 이상의 TLD, 예. (".기술")

다음 코드에는 새로운 정규 표현식이 있습니다. 한편, 이 패턴은 이전 섹션의 마지막 이메일에 대해 true를 반환합니다.

let pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

function checkEmailAddress(email_address) {
  let result = pattern.test(email_address);
  console.log(result);
}

checkEmailAddress('ab0c@my-domain.com')

출력:

true

한편, 아래 나열된 이메일 주소는 이 패턴을 통과하지 않습니다. 그러나 일부 이메일 공급자에게는 모두 유효합니다.

ab+c@my-domain.com
mr+john@my-domain.com.ga

이메일 확인 및 JavaScript의 이메일 및 도메인 이름에 숫자 및 유효한 문자 허용

오늘날 존재하는 대부분의 유효한 메일 주소를 허용하는 유연한 정규식 패턴을 작성할 수 있습니다. 이러한 이메일은 다음과 같은 특징을 갖습니다.

  1. 마침표와 같은 일부 문자는 이메일 및 TLD 이름에 로그인합니다.
  2. .technology.business와 같은 새로운 TLD.

이 패턴의 단점은 이러한 문자를 여러 개 허용한다는 것입니다. 결과적으로 사용자는 유효해 보이지만 그렇지 않은 매우 긴 이메일 주소를 전달할 수 있습니다.

let pattern =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

function checkEmailAddress(email_address) {
  let result = pattern.test(email_address);
  console.log(result);
}

checkEmailAddress('johndoe@citadel-consulting.com');

출력:

true

그러나 다음과 같은 유효하지 않은 이메일 주소는 이 패턴을 통과합니다.

aaa++++++++++@gmail.technologyyyyyyyyyyyyyyyyyyyyyyyyyyy.com

JavaScript에서 RFC 5322 형식으로 이메일 주소 확인

RFC 5322 형식을 준수하는 정규식 패턴을 작성할 수 있습니다. 그러나 이러한 정규식은 길이가 깁니다.

결과적으로 이해할 수 없습니다. 따라서 JavaScript에서 RegExp 클래스와 함께 속기 버전을 사용할 수 있습니다.

다음 코드에서는 RFC 5322를 준수하는 정규식 패턴을 구현했습니다. 따라서 가장 유효한 이메일 주소에 대해 true를 반환합니다.

let pattern = new RegExp(
    '([!#-\'*+/-9=?A-Z^-~-]+(\.[!#-\'*+/-9=?A-Z^-~-]+)*|"\(\[\]!#-[^-~ \t]|(\\[\t -~]))+")@([!#-\'*+/-9=?A-Z^-~-]+(\.[!#-\'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~]*])');

function checkEmailAddress(email_address) {
  let result = pattern.test(email_address);
  console.log(result);
}

checkEmailAddress('aa@gmail.com.sa');

출력:

true

결론

이 문서에서는 전자 메일 주소의 유효성을 검사하는 다양한 정규식 패턴에 대해 설명했습니다. 그러나 그것은 모두 클라이언트 측에 있습니다.

추가 보안을 위해 서버 측에서도 이메일을 확인하시기 바랍니다.

Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

관련 문장 - JavaScript Regex