JavaScript에서 이메일 주소 유효성 검사하기
JavaScript에서 이메일 주소의 유효성을 검사하는 가장 기본적인 방법은 문자열에 @와 .(마침표)가 올바른 순서와 위치로 존재하는지 확인하는 것입니다. 예를 들어 abc@gmail.com처럼 사용자 이름 뒤에 @가 오고, 그다음 도메인 이름과 마침표, 최상위 도메인이 이어지는 구조여야 합니다.
검증 로직의 핵심 원리
간단한 검증 함수는 아래 두 가지 조건을 점검합니다.
indexOf("@"): @의 위치를 반환합니다. 결과값이 1보다 작으면 @가 없거나 문자열 맨 앞에 있다는 뜻이므로 유효하지 않은 이메일입니다.lastIndexOf("."): 마지막 마침표의 위치를 반환합니다. @와 마침표 사이의 거리가 2보다 작으면 도메인 이름이 너무 짧다는 의미이므로 역시 유효하지 않습니다.
예제 코드
다음 코드를 실행하면 입력된 이메일 주소의 유효 여부를 true 또는 false로 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
var emailID;
function validateEmail(emailID) {
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || (dotpos - atpos < 2)) {
document.write("Please enter correct email ID");
document.myForm.EMail.focus();
return false;
}
return true;
}
document.write(validateEmail("abc@gmail.com"));
</script>
</body>
</html>
abc@gmail.com은 @의 위치가 1보다 크고, @와 마지막 마침표 사이에 "gmail"이라는 도메인 이름이 충분히 존재하므로 위 함수는 true를 반환합니다.
정규 표현식(RegExp)으로 더 정밀하게 검사하기
위 방식은 간단하지만 공백 포함, 특수문자 남용 같은 세부 오류까지는 걸러내지 못합니다. 실무에서는 정규 표현식을 활용해 더 엄격하게 검증하는 것이 좋습니다.
function isValidEmail(email) {
var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return pattern.test(email);
}
document.write(isValidEmail("abc@gmail.com")); // true
이 패턴은 @ 앞뒤에 공백이 없는 문자열이 존재하고, @ 뒤에 반드시 하나 이상의 마침표가 있는 형식인지 검사합니다.
클라이언트 측 검증은 사용자 경험을 개선하는 1차 필터일 뿐이라는 점을 기억하세요. 보안을 위해서는 서버 측에서도 반드시 이메일 형식을 다시 한 번 검증해야 합니다.