javascript 이메일 유효성 검사

연관글

2025.04.22 - [Programing/PHP] - PHP 이메일 유효성 검사

2025.04.21 - [Programing/javascript] - 이메일 입력 필드를 위한 한글 및 공백 제거 jQuery 함께보면 좋은 글

 

사용자가 입력하는 이메일 주소가 형식에 맞는지를 검사하는 기능은 대부분의 회원가입, 로그인, 문의폼 등에 필수적으로 포함됩니다. JavaScript에서 이를 정규표현식으로 간단하게 처리할 수 있으며, 본 글에서는 isValidEmail 함수의 동작 방식과 정규표현식의 의미를 정리합니다.

---

✨ 함수 설명

function isValidEmail(email) 
{
    const EMAIL_PATTERN = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return EMAIL_PATTERN.test(email);
}

---

✨ 정규표현식 분석

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

• ^ : 문자열 시작
• [a-zA-Z0-9._%+-]+ : 사용자명 부분. 영문 대소문자, 숫자, 특수문자 일부 허용
• @ : 반드시 @ 포함
• [a-zA-Z0-9.-]+ : 도메인 이름. 하이픈과 점 포함 가능
• \. : 마지막 도메인을 위한 점(.) 문자
• [a-zA-Z]{2,} : 최상위 도메인(TLD)은 영문자 최소 2자리 이상 (com, net, kr 등)
• $ : 문자열 끝

---

✨ 사용 예시

isValidEmail("test@example.com");       // true
isValidEmail("user.name123@domain.co"); // true
isValidEmail("invalid_email@com");      // false (최상위 도메인 짧음)
isValidEmail("@example.com");           // false (사용자명 없음)
isValidEmail("test@.com");              // false (도메인 이름 없음)

---

✨ 활용 팁

• 이 정규식은 실용적인 형식을 기준으로 하며, 실제 이메일 표준(RFC 5322)을 100% 따르지는 않습니다.
• 입력값 검증 후 백엔드에서 추가 유효성 체크나 이메일 인증 절차를 함께 적용하면 더 안전합니다.
• 모바일 폼에서는 HTML5의 type="email" 속성과 함께 사용하면 입력 시 키보드 유도 등 UX 개선 효과가 있습니다.

---

✨ 결론

isValidEmail 함수는 가장 보편적인 이메일 포맷 검증을 위한 간단하면서도 효과적인 유틸리티입니다. 프론트엔드에서 빠르게 사용자 입력을 검증하고, UX를 높이기 위한 기초 필터로 활용할 수 있습니다.