[jQuery] 정규식을 이용한 이메일 유효성 체크 플러그인

개요

정규식을 이용한 이메일 주소 유효성 확인을 위한 Javascript의 기본 기능은  이메일 유효성 확인에서 소개를 했는데,

jQuery의 플러그인을 만들어 보자.

먼저 이메일 주소를 입력창에 입력했을 때 바로 확인할 때와 폼 전송할 때 확인할 때 같이 사용하는 플러그인이다.

이메일 주소 확인 정규식 코드

이메일 주소를 입력하고 포커스를 이동하면 정규식을 통해 유효성 확인하고 오류이면 메시지를 출력한다.

정규식 패턴의 상세 내용은 "[JS] 이메일 주소 유효성 확인하기(feat. 정규식)"에서 확인 가능하다.

$('#email').change(function() {
  let email = $(this).val();
  let pattern_email = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;
  pattern_email = new RegExp(pattern_email);
  if (pattern_email.test(email) == false) {
    alert('정확한 이메일 주소를 입력하세요');
    $(this).focus();
  }
});

 

기본적인 플러그인

폼에 이메일 입력하는 항목이 여러 개인 경우를 위해 each를 이용하여 각 항목을 검사한다.

그리고 매개변수로 msg_error에 값이 있으며 alert으로 메시지를 표시하고 포커싱 한다. 

$.fn.validEmail = function(msg_error = '') {
  let is_valid = true;
  this.each(function(k, o) {
    let pattern_email = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;
    pattern_email = new RegExp(pattern_email);
    let email = $(o).val();
    if (email == '') {
      return true;
    }
    if (pattern_email.test(email) == false) {
      alert(msg_error);
      $(o).focus();
      return is_valid = false;
    }
  });
  return is_valid;
}

사용법 :

1. 유효성 여부만 반환 : $('.emails').validEmail(); 

2. 오류시 메시지 출력 : $('.emails').validEmail('정확한 이메일 주소를 입력하세요'); 

Change 이벤트를 위한 플러그인

기본 플러그인을 이용하여 이메일 주소가 입력될때 바로 확인 가능하도록 한다.

$.fn.validEmailOnChange = function(msg_error = '') {
  this.change(function() {
    if ($(this).validEmail(msg_error) == false) {
      return false;
    }
    return true;
  })
}

사용법 :

1. 오류시 메시지 출력 : $('.emails').validEmailOnChange('정확한 이메일 주소를 입력하세요'); 

폼 전송 시(Submit) 유효성 체크하기

폼이 전송될때는 아래처럼 하면 된다.

$('#form').submit(function() {
  if ($('.email').validEmail('이메일 주소를 확인하세요') == false) {
    return false;
  }
  return false;
});