이메일 유효성 검사(javascript) - 워드프레스 정보꾸러미

다양한 방법으로 이메일 유효성을 검사할 수 있습니다. 가장 간단한 것은 HTML5에 내장된 이메일 유효성 검사(email validation) 기능을 활용하는 것입니다. 이메일 필드에 type="text" 대신 type="email"을 사용하면 됩니다.

<input type="email" name="email">

이 방법은 form 태그 안에 위치해야 하고 submit을 눌러야 작동하는 등 일부 제약이 있습니다. 이 방법 대신 정규식(regular expression)을 사용하여 보다 정교하게 이메일 유효성 검사를 수행할 수 있습니다.

정규식을 이용한 이메일 유효성 검사 함수:

function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}
// Source: stackoverflow.com

워드프레스 KBoard에서 응용하기:

위의 자바스크립트 함수를 사용하여 워드프레스 게시판 플러그인인 KBoard에서 새로운 이메일 필드를 추가하고 이메일 유효성 검사를 수행할 수 있습니다. 예를 들어, 다음과 같이 editor.php 파일에 이메일 필드를 추가하는 경우:

<input type="text" placeholder="" name="kboard_option_useremail" value="<?php echo $content->option->useremail?>" id="useremail">

다음과 같은 코드를 script.js 파일에 추가하여 이메일 유효성 검사를 수행할 수 있습니다.

var re = /^(([^<>()[\]\\.,;:\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,}))$/;

var email = document.getElementById('useremail').value;
if (email == '' || !re.test($email)) {
alert("올바른 이메일 주소를 입력하세요")
return false;
}

위의 코드를 사용하면 잘못된 이메일 주소를 입력한 경우 다음과 같이 경고 창이 표시됩니다.