정규 표현식을 통해 사용자 입력 데이터(이메일, 전화번호 등) 유효성 검사하기

정규 표현식이란?

정규 표현식(Regular Expression)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 웹에서는 주로 브라우저 단에서 사용자가 입력한 데이터가 올바르게 입력되었는지 검사(유효성 검사)하기 위해 정규 표현식을 사용한다.

 

만일 사용자가 회원 가입을 위해 ID, 비밀번호, 이메일, 전화번호 등을 작성하는데 중간에 실수로 데이터를 잘못 입력했다고 가정해보자. 사용자가 최종적으로 "완료" 버튼을 눌렀을 때(서버로 데이터가 전송되었을 때) 잘못된 데이터가 입력되었다면 페이지 리로드가 됨과 동시에 기존 작성했던 정보들이 초기화 되면서 다시 작성해야하는 불편함이 생긴다. 이때 사용자가 특정 항목에 대해 입력을 마치면 그때 그때 정규표현식을 통해 데이터 유효성 검사를 해주면 보다 나은 UX를 제공할 수 있을 것이다.

 

또는 의도적으로 스크립트 등 유효하지 않은 데이터를 입력함으로써 웹 서버를 공격(XSS, Cross-Site-Scripting)하는 것을 사전에 차단하기 위해 사용되기도 한다. 하지만 크롬 브라우저의 경우 개발자 도구를 지원하여 브라우저 단에서 정규 표현식을 통해 유효성 검사하는 것을 무력화시킬 수 있기 때문에 서버에서도 사용자로부터 입력받은 데이터에 대해서는 반드시 유효성 검사(정규 표현식 등 활용)를 해주어야 한다.

 

정규 표현식에 대한 기본 문법은 다음 사이트를 참고해볼 수 있다. 

 

JavaScript Regular Expression Cheatsheet - Debuggex

 

이번 글에서는 정규 표현식의 문법에 대해 직접적으로 다루기 보다는 웹 브라우저에서 사용자가 주로 입력하는 데이터들을 정규 표현식을 통해 유효성 검사해보는 실습에 대해 다루고자 한다.

 

사용자 입력 데이터 글자수 제한하기

사용자는 특정 웹 사이트에서 자신의 회원 정보 중 자기소개 항목을 작성하거나 특정 서비스를 이용한 후 후기를 남기는 등 브라우저에서 일정한 길이의 데이터를 입력하는 경우가 많이 있다. 이때 사용자가 입력할 수 있는 데이터에 제한을 두지 않는다면 데이터를 관리하는 서버 차원에서 여러가지 불편함이 생길 것이다. 이를 정규 표현식을 통해 유효성 검사해보자.

 

const comment_regex = /^.{5,400}$/;
let inText = document.querySelector('.review_textarea'); // 사용자 입력 DOM

inText.addEventListener('change', (event) => {
	if(!(comment_regex.test(event.target.value.trim()))) {
		inText.value = "";
		alert("최소 5자 이상 작성해주세요 😂");
	}
});

 

우선 여기에서 적용된 정규 표현식의 문법을 살펴보자. 정규 표현식 문법은 슬래시 / / 사이에 작성해주면 된다. ^이 먼저 등장했는데 이는 가장 먼저 등장해야 할 문자를 지정하는 기호이다. 여기서는 .이 먼저 나와야 하는데, .이란 개행 문자를 제외한 임의의 한 문자를 뜻한다. 또한 중괄호 { }를 통해 최소 글자수(5)와 최대 글자수(400)을 정해주고 있다. 마지막으로는 $이 등장하고 있는데 이는 가장 마지막에 등장해야 할 문자를 지정하는 기호이다. 즉, 여기서 의미하는 정규 표현식은 5~400개의 임의의 문자로 이루어진 문자열의 집합을 표현하고 있다.

 

addEventListener를 통해 사용자가 입력을 마치면(change) Event가 발생하도록 했는데, 해당 정규 표현식에 대한 test 메서드를 사용하여 사용자가 입력한 값이 정규 표현식과 일치하는지 검사하도록 했다. 이때 사용자가 입력한 값의 맨 앞과 맨 뒤에 불필요한 공백이 있을 수 있으므로 trim을 통해 제거시킨 후 검사시켰다.

 

 

전화번호 유효성 검사하기

사용자가 예약 서비스나 배송 서비스 등을 이용하는 경우 자신이 연락받을 전화번호를 입력하는 경우가 많이 있다. 이때 전화번호는 3개의 숫자열로 나뉜다고 볼 수 있다. 우선 맨 앞에는 숫자가 2개인 경우(02, 서울 지역번호)와 3개인 경우(010, 070 등)가 존재한다. 가운데에는 숫자가 3개(옛날 전화번호)일수도 있고, 4개일수도 있다. 마지막에는 항상 숫자가 4개로 끝난다. 이때 데이터 관리자 입장에서 전화번호를 관리 시 골치 아픈 것은 누구는 하이픈을 쓰고 누구는 안 쓴다는 것이다. 이러한 점들을 고려하여 정규 표현식을 통해 유효성 검사를 해보자.

 

const tel_regex = /^\d{2,3}-\d{3,4}-\d{4}$/;
let tel = document.querySelector('#tel'); // 사용자 입력 DOM

tel.addEventListener('change', (event) => {
	if(!(tel_regex.test(event.target.value)) && event.target.value != "") {
		tel.value = "";
		alert("올바른 형식에 맞게 작성해주세요. 😂");
	}
});

 

여기서의 정규 표현식은 첫번째 등장할 문자로 \d(숫자 하나)가 나오도록 했다. 이때 이 숫자는 2~3개이도록 했다. 그 다음 여기서는 하이픈(-)을 통해 전화번호 숫자열을 구분하고자 하여 이 2~3개의 숫자열 다음에 하이픈이 나오도록 했다. 같은 방식으로 진행하여 최종적으로 정규 표현식이 숫자열(2~3개)-숫자열(3~4개)-숫자열(4개)를 표현하도록 했다.

 

위에서와 마찬가지로 사용자가 입력을 마치면(change) Event가 발생하도록 했고, 해당 정규 표현식에 대한 test 메서드를 사용하여 사용자가 입력한 값이 정규 표현식과 일치하는지 검사하도록 했다. 이때 사용자가 입력을 하다가 입력값들을 모두 지우고 해당 창을 나오는 경우도 있을 수 있으므로 이러한 경우에는 유효성 검사가 이루어지지 않도록 했다.

 

 

이메일 유효성 검사하기

마찬가지로 사용자가 웹 서비스를 이용하다보면 이메일 데이터를 입력하는 경우도 많이 있다. 이메일 같은 경우 ID와 @ 그리고 이메일 도메인 총 3개로 구성된다고 볼 수 있다. 우선 ID의 경우 숫자나 알파벳으로 시작하고 끝나며 중간에 -(하이픈) 또는 _(언더바) 기호와 함께 부가적인 데이터가 나올 수도 있다. 예를 들면 ikjo_hello인 경우이다. 하지만 이는 사용자 선택사항이다. 이러한 기준은 이메일 도메인 부분 역시 ID와 마찬가지이다. 하지만 마지막에 Top-Level 도메인의 경우 . 문자와 함께 2글자나 3글자로 끝나게 된다. 예를 들어 naver.com 또는 dominos.co.kr 등이 있다. 이러한 점들을 고려하여 정규 표현식을 통해 유효성 검사를 해보자.

 

const email_regex = /(^[0-9a-zA-Z])([-_]?[0-9a-zA-Z])*(@[0-9a-zA-Z])([-_]?[0-9a-zA-Z])*(\.[a-zA-Z]{2,3})+$/;
let email = document.querySelector('#email'); // 사용자 입력 DOM

email.addEventListener('change', (event) => {
	if(!(email_regex.test(event.target.value)) && event.target.value != "") {
		email.value = "";
		alert("올바른 형식에 맞게 작성해주세요. 😂");
	}
});

 

여기서의 정규 표현식은 첫번째 등장할 문자로는 0~9 또는 a~z 또는 A~Z 중 하나로 했다. 그 이후에는 하이픈 또는 언더바 문자와 함께 0~9, a~z, A~Z 로 구성된 연속된 문자열이 나오게 된다. 이때 하이픈과 언더바는 선택사항이므로 ? 기호를 통해 나올 수도 있고 안나올수도 있도록 했고 * 기호를 사용하여 이러한 문자열 묶음이 0개 이상을 나타내도록 했다. 이때 ID의 끝의 문자는 0~9, a~z, A~Z 중 하나의 문자로 끝날 것이다.

 

이후 도메인은 @ 문자와 함께 0~9, a~z, A~Z 중 하나의 문자가 나오도록 했고 ID와 마찬가지로 하이픈 또는 언더바 문자와 함께 0~9, a~z, A~Z 로 구성된 연속된 문자열이 나오게 했다. 기준은 동일하다. 마지막으로 Top-Level 도메인을 나타내기 위해 . 문자와 함께 a~z, A~Z 문자로 이루어진 2~3개의 문자열이 최소 하나 이상 나오도록 하고(+ 기호 사용) 이를 끝 문자로 지정하였다. 이때 . 문자는 당초 정규 표현식에서 개행 문자를 제외한 임의의 문자를 나타내는 예약어로 지정되어있으므로 \을 이용하여 . 그 자체를 나타내도록 했다.

 

현재 정규 표현식으로는 이메일 데이터의 길이를 제한하는 방법은 없다. 이때 필자 개인적인 생각으로는 앞서 사용자 입력 데이터 글자수 제한을 위해 사용했던 정규 표현식을 추가적으로 사용하여 적절한 이메일 데이터 길이를 유효성 검사하는 방법을 취해볼 수도 있겠다.

 

 

참고자료

• https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D