웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트의 정규표현식은 프로그래밍 언어가 가지는 가장 큰 기능중 하나입니다. 오늘은 정규표현식을 사용하여 이메일을 검증하는 함수를 만들어 보려합니다.
# 이메일이 올바른지 검증하는 함수
그런데 왜 이메일 검증이 필요할까요?"이메일을 입력받을때 검증하는 이유는?"
방문자에게 받은 소중한 정보 중 하나인 이메일 주소가 만약 의도치 않게 잘못된 이메일이라면 어떻게 해야할까요? 잘못된 주소를 사용할 수도 없으므로 연락이 닿을 방법이 없습니다. 결국 이메일을 입력받는 최초 과정에 최대한 실수를 줄이기 위한 장치로 이메일 주소 검증방법을 사용합니다.
행여 연락처가 있다고해도 이메일을 작성자에게 재요청할 경우 다시 못 받는 경우가 생길 수도 있고 무엇보다 가입자를 번거롭게 만드는 행위는 최대한 피해야 할 것입니다. 그럼 아래에서는 정규표현식을 사용한 함수를 아래 예제에서 만들어 보겠습니다.
! 이메일 검증 정규표현식 예제보기
우리는 이메일 주소를 입력받는 입력폼을 만들고 정상적인 이메일 주소인 경우에만 이를 서버에 전송하도록 만드는 예제 코드를 작성하겠습니다. 먼저 아래는 html과 css 코드입니다.@ email.html
<form class="emailSubscribe" action="/enroll.php">
<h4>뉴스레터 구독으로 간편하게 새소식을 만나세요!"</h4>
<div>
<input id="email" type="text" maxlength="50" name="mailAddr" placeholder="Email" />
<button type="button" onclick="verifyEmail()">지금 구독하기</button>
</div>
</form>
<h4>뉴스레터 구독으로 간편하게 새소식을 만나세요!"</h4>
<div>
<input id="email" type="text" maxlength="50" name="mailAddr" placeholder="Email" />
<button type="button" onclick="verifyEmail()">지금 구독하기</button>
</div>
</form>
위 코드는 방문자에게 이메일주소를 받기 위한 입력폼입니다. 사용자가 뉴스레터 구독을 원하여 이메일 주소를 넣은 뒤 클릭하면 검증을 위한 콜백함수 verifyemail()이 실행됩니다.
이메일 검증을 위한 콜백함수는 이메일 검증을 수행한 후 올바른 경우에는 서버에 정상적으로 등록하기 위해 이동하고 잘못된 이메일 입력시 재입력을 요청합니다. 아래는 검증을 위한 콜백 함수입니다. 아래 코드를 확인해주세요.
! 이메일을 검증 체크하는 자바스크립트 코드보기
이메일 검증에 사용된 스크립트 코드는 아래와 같습니다.@ email.js
verifyEmail = function() {
// 이메일 검증 스크립트 작성
var emailVal = $("#email").val();
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
// 검증에 사용할 정규식 변수 regExp에 저장
if (emailVal.match(regExp) != null) {
alert('Good!');
}
else {
alert('Error');
}
};
// 이메일 검증 스크립트 작성
var emailVal = $("#email").val();
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
// 검증에 사용할 정규식 변수 regExp에 저장
if (emailVal.match(regExp) != null) {
alert('Good!');
}
else {
alert('Error');
}
};
위 코드는 정규표현식을 사용하여 이메일을 검증합니다. 이메일 검증 과정 후 정규표현식에 부합하는 주소값이 있으면 'Good!' 이라는 경고창을... 아니라면 'Error'를 표시합니다. 이를 기준으로 올바른 이메일 주소인 경우에만 페이지로 해당값을 전송하게 됩니다.
만약 잘못된 이메일 주소가 입력될 경우 경고창을 통해 수정하도록 요청하는 코드입니다.
코드를 구현해보면 이상없이 잘 구동되는 것을 확인하실 수 있습니다. 그렇다면 정규식은 어떻게해서 위와같이 올바른 이메일 패턴을 확인할 수 있을까요? 먼저 만들어진 정규식에 사용된 메타 및 특수문자를 확인해보겠습니다.
! 이메일 검증을 위한 정규표현식 분석해보기
아래 정규식은 어떻게 동작할까요? 하나하나 알아보도록 하겠습니다. 먼저 위 검증에 사용된 정규표현식은 다음과 같습니다.var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
- / / 안에 있는 내용은 정규표현식 검증에 사용되는 패턴이 이 안에 위치함
- / /i 정규표현식에 사용된 패턴이 대소문자를 구분하지 않도록 i를 사용함
- ^ 표시는 처음시작하는 부분부터 일치한다는 표시임
- [0-9a-zA-Z] 하나의 문자가 []안에 위치한 규칙을 따른다는 것으로 숫자와 알파벳 소문지 대문자인 경우를 뜻 함
- * 이 기호는 0또는 그 이상의 문자가 연속될 수 있음을 말함
# 예제코드 실행해보기
위 예제를 실행하면 어떻게 될까요? 동일한 코드를 아래에서 만들고 동작 여부를 확인해보겠습니다. 직접 입력해보세요.아래의 글도 찾고 계시지 않나요?
