[JS] 이메일 주소 유효성 확인하기(feat. 정규식)

jQuery를 이용한 것은 여기에서 정규식을 이용한 이메일 유효성 체크 플러그인

 

1. 요구 기능

입력된 이메일 주소의 유효성을 체크하고 유효하지 않으면 alert으로 경고를 띄우고 입력된 값은 지워준 후 포커싱 한다.

 

2. 주요 내용

1) 이메일 정규식과 이메일 입력 값의 비교 방법

2) VanillaJS에서의 change 이벤트 처리 방법 (onchange, event listener)

 

3. 이메일 정규식

자바스크립트에서 이메일 정규식은 2가지의 정규식이 있고, 정규식 표현방식도 2가지가 있으며, 입력값과 정규식 비교 방법도 2가지가 있으며 어느 것을 사용해도 상관없다.

var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
var pattern = new RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i);

var pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;
var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);

return pattern.test(obj.value);
return (obj.value.match(pattern) != null);

 

 

4. 입력란에서 change 이벤트 감시하기

이메일 input의 값(value)이 변경되고 포커스가 다른 곳으로 이동되는 이벤트가 change이벤트이다. change 이벤트 발생 방법은 크게 두 가지가 있다.

1) onchange : input 태그에 속성으로 입력한다.

<input type="text" name="email" onchange="validEmail(this)">

2) addEventListener : javascript 코드에서 요소의 이벤트를 감시하는 함수이며 사용법은 2가지가 있다.

const input_email = document.querySelector('#emailchange');
/**
* 요소 선택방법은 querySeletor를 이용하여 jquery 처럼 .class 또는 #id 로 지정할 수 있으며.
* getElementById 를 이용해서 ID로 지정할 수 있다.
*
* const input_email = document.getElementById('emailchange');
* JavaScript에서 선택된 요소에 이벤트를 등록하는 방법은 아래의 두가지 방법이 있다.
*/

input_email.addEventListener('change', (e) => {
  valiFormEmail(e.target);
});

input_email.addEventListener('change', updateValue);

function updateValue(e) {
	valiFormEmail(e.target);
}

 

5. 코드 완성

위에서 언급된 방식을 한 번에 작성했다. 위에서 같은 기능 다른 코드인 경우 주석으로 표기를 했다. 

1) HTML

<input type="text" name="email" id="email" value="" onchange="valiFormEmail(this)">

<input type="text" name="emailchange" id="emailchange" value="" >

2) JavaScript

function valiFormEmail(obj){
	if(validEmail(obj) == false){
  	alert("올바른 이메일 주소를 입력하세요.");
    obj.value = '';
    obj.focus();
    return false;
  }
}


const input_email = document.querySelector('#emailchange');
/**
* const input_email = document.getElementById('emailchange');
*/

input_email.addEventListener('change', (e) => {
  valiFormEmail(e.target);
});

/*
input_email.addEventListener('change', updateValue);
function updateValue(e) {
	valiFormEmail(e.target);
}
*/

function validEmail(obj){
	var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
  	//var pattern = new RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i);
  	//var pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;
  	//var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
  	//return pattern.test(obj.value);
	return (obj.value.match(pattern) != null);
}