이 글에서 javascript를 사용하여 이메일 유효성 검사를 수행하는 방법을 살펴보았습니다. 이 글에서는 jQuery를 사용한 이메일 유효성 검사 방법을 살펴보겠습니다. 마찬가지로 여러 가지 방법이 있을 수 있습니다. (Source: jquerybyexample)

validateEmail()은 이메일 주소를 파라미터로 받아서 정규표현식(Regular Expression)을 사용하여 이메일 유효성 검사를 수행합니다.

function validateEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}​

그리고 다음 jQuery 코드를 사용하여 위의 함수(validateEmail())를 호출합니다.

$(document).ready(function() {
$('#btnValidate').click(function() {
var sEmail = $('#txtEmail').val();
if ($.trim(sEmail).length == 0) {
alert('Please enter valid email address');
e.preventDefault();
}
if (validateEmail(sEmail)) {
alert('올바른 이메일입니다');
}
else {
alert('잘못된 이메일입니다');
e.preventDefault();
}
});
});

(참고로 워드프레스에서 위의 코드가 잘 작동하지 않으면 $를 jQuery로 바꾸어보시기 바랍니다.)

위의 코드를 사용하여 테스트해보면 잘못된 주소를 넣을 경우 아래 그림과 같이 오류 메시지를 출력합니다.

Email Validation using jQuery

워드프레스와 관련하여 문의사항이 있나요?

워드프레스와 관련하여 문제가 있는 경우 서비스(유료) 문의란을 통해 문제 해결을 요청하실 수 있습니다.

Service Request