email validation

요즘 SNS 등의 국제적인 사이트 뿐만 아니라 국내 수많은 사이트들이 가입하는 회원의 ID 대신 email을 수집하는 경우가 주류를 이루고 있다. 또한 email은 회원들에게 정보를 제공하거나 수집할 때 SNS와 함께 가장 유용한 방법 중 하나로 활용되고 있다. 따라서 회원가입 또는 로그인 단계에서 올바른 이메일 주소를 입력 받는 것은 그만큼 중요한 일이 되었다.

email이 형식에 맞는지 체크하는 방법은 크게 두 가지가 있다. 하나는 클라이언트 사이드(client-side)에서 검증하는 것이고, 또 하나는 서버 사이드(server-side)에서 확인하는 것이다.

클라이언트 사이드에서의 검증은 브라우저 수준에서의 확인절차이다. 이 때 정규식을 활용한 자바스크립트 주로 사용되어 왔다. 최근에는 html5에 새로 추가된 email type의 input 필드로도 메일 주소 유효성을 검증할 수 있다. 사실 html5의 이 새로운 input 필드 type이 모든 브라우저에서 사용될 수 있다면 복잡한 자바스크립트를 사용할 필요는 없을 것이다.

브라우저를 통해서 서버로 전송된 데이터에서 email 주소를 처리(메일 발송 또는 db 저장 등) 시에 형식의 유효성을 검증하는 것이다. 이 검증은 php나 asp 또는 aspx, jsp와 같은 서버측 스크립트나 웹프로그램이 담당한다. 클라이언트 사이드에서 아무리 확실하게 검증한다고 해서 브라우저에서 입력되는 값은 서버로 전송될 때 여러가지 방법으로 위조될 수 있다. 브라우저들이 제공하고 있는 관리도구의 콘솔을 이용하면 코드와 값을 쉽게 조작할 수 있기 때문이다. 따라서 서버 측에서 반드시 유효성을 검증할 필요가 있다.

이제 각각의 방법에 대해 알아보자.

html5의 input type=’email’

input 필드의 email type은 html5에서 새로 추가된 형식 중의 하나이다. 이 형식은 IE(10부터 지원, 9나 그 이전 브라우저는 지원하지 않음), Firefox, Chrome, Opera 최신 버전들이 지원하고 있다. Safari는 아직 지원하지 않는다. 단, iphone에 포함된 Safari는 email 형식을 인식하여 키보드를 email 입력에 맞게 설정해서 보여준다(영문 키보드에 @를 포함해서 보여줌).

하지만 이 email type에 대한 검증은 @ 앞뒤로 적절한 문자(공백이나 일반적으로 email 주소에 허용되지 않는 특수문자를 제외한)가 있는지에 대해서만 검증한다. 예를 들어 abc@abc는 올바른 email로 검증한다. 따라서 클라이언트 사이드에서 정확한 email validation을 하려면 여전히 javascript를 활용하여야 할 것으로 보인다.

다음은 IE 11, Chrome, Firefox, Opera에서 validation을 해본 결과 화면이다.

input-type-email-ie11

html5 email validation – IE 11

input-type-email-chrome

html5 email validation – Chrome

input-type-email-ff

html5 email validation – Firefox

input-type-email-opera

html5 email validation – Opera

IE 11, Chrome, Firefox 모두 바르지 @와 @ 앞뒤로 적절한 문자가 포함되지 않은 채 Form을 전송하면 에러메시지를 보여주며 전송을 취소한다. 다만 Opera는 에러메시지는 없고 input 필드의 테두리가 주황색으로 바뀌면서 폼이 전송되지 않는다는 점이 다르다.

결론적으로 html5의 emial validation은 완벽하지는 않아서 클라이언트 사이드에서의 검증을 올바르게 하기 위해서는 javascript의 도움을 받아야 한다.

 

email validation in javascript

javascript를 활용한 email 유효성 검증은 javascript가 지원하는 정규표현식에 대한 검증으로 처리한다. 아래 코드가 일반적인 email이 갖는 구조(예, abc@def.gh)에 대한 패턴을 검증하는 정규표현식이다.

/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/

주어진 email 주소가 위 패턴에 맞는지 검사( 예, pattern.test(email) )하여 결과가 true인지 false인지를 확인하면 된다. 그 예제는 아래와 같다.

javascript 정규표현식 참고 : http://www.w3schools.com/js/js_regexp.asp

 

email validation in PHP

전세계에서 가장 많이 사용되는 서버 사이드 스크립트 언어인 PHP에서 email의 유효성을 검증하는 방법을 알아보자.

PHP도 버전에 따라 validation 함수를 사용하거나 정규표현식을 사용할 수 있다.

filter_var 를 활용한 email validation ( PHP ver >= 5.2.0)

filter_var 함수는 php 5.2.0부터 추가된 validation 함수로 email 뿐만 아니라 숫자, 정규식, url, ip address 등의 유효성을 검증한다.

$email = “mail_id@yourdomain.com”;
$is_mail = filter_var($email, FILTER_VALIDATE_EMAIL);

위와 같이 하면 $is_mail 변수에 true가 반환될 것이다. 물론 올바르지 않은 email 값이 검사되었다면 결과는 false 값이 반환될 것이다.

아래는 filter_var를 활용한 email 검증 예제이다.

 

PHP 정규표현식을 활용한 email validation

서버 환경에 따라 php 버전이 낮아서 filter_var를 지원하지 않을 경우 정규표현식을 활용하여야 한다. 그 소스코드는 다음과 같다. 위 예제에서 filter_var 대신에 preg_match 함수를 써서 주어진 email 주소가 정규표현식 “/([\w\-]+\@[\w\-]+\.[\w\-]+)/”에 일치하는지 검증하는 부분만 바꿨다.

 

 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기