[JavaScript] 이메일 주소 유효성 검사

 

JavaScript 로 이메일 주소 유효성 검사하기 

 

 

JavaScript 의 이메일 유효성 검사 두 가지 정규식 표현 방법 

- 

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);

 

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

정규식 설명 : 

숫자 (0~9) or 알파벳 (a~z, A~Z) 으로 시작하며 중간에 -_. 문자가 있을 수 있으며 그 후 숫자 (0~9) or 알파벳 (a~z, A~Z)이 올 수도 있고 연달아 올 수도 있고 없을 수도 있다. 

@ 는 반드시 존재하며 . 도 반드시 존재하고 a~z, A~Z 의 문자가 2,3개 존재하고 i = 대소문자 구분 안한다.

 

^ 문자열의 시작 

? 존재여부 (앞의 문자가 없거나 1개 있는경우) 

* 반복 여부 표현 - (aa)* (aa) 가 0개 ~ infinite까지 모두 가능 

$ 문자열의 종료 

 

1. html 에 onchange event로 함수 실행하기 

html

<input id="userid" name="userid" type="email" onchage="validEmail(this)" aria-invalid="false" maxlength="254" class="generic-input-field inputFocus form-textbox joinJS">
<span aria-hidden="true" class="form-label" id="idms-input-labelledby-1623047548334-1" for="userid">
    name@example.com
</span>

반응형

* onchange = input box 안 내용이 change 바뀌면 validEmail(this) 함수 실행, 본인 this 을 함수 매개변수로 입력 

** this가 빠지면 안됨 !! 

 

 

JS

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

function validEmailCheck(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;
    return (obj.value.match(pattern)!=null)
}

 

 

 

 

 

2. html의 input id를 가져와 JS에서 addEventListener 로 함수 실행하기

 

html

<input id="userid" name="userid" type="email" aria-invalid="false" maxlength="254" class="generic-input-field inputFocus form-textbox joinJS">
<span aria-hidden="true" class="form-label" id="idms-input-labelledby-1623047548334-1" for="userid">
    name@example.com
</span>

 

JS

let userid = document.querySelector('#userid')
userid.addEventListener('change',(e)=>{  // html 의 onchange="validEmail(this)"와 동일 
    validEmail(e.target)
})

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

function validEmailCheck(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;
    return (obj.value.match(pattern)!=null)
}

 

 

 

해당 input id를 가지고와서 변수로 담고 addEventListener 로 함수 실행 여기서 'onchage' 가 아닌 'change' 만 써도 된다 ! 

아래 console.log(e) & console.log(e.target) 내용 ! 

 

 

 

 

핸드폰 번호, 생년월일 유효성 검사 

https://blckchainetc.tistory.com/237

[JavaScript] 이메일, 핸드폰 번호, 생년월일 정규식 사용하여 유효성 검사하기

생년월일, 핸드폰번호 입력 시 자동 하이픈 넣기

https://blckchainetc.tistory.com/238

[JavaScript] 핸드폰번호, 생년월일 - 하이픈 자동 삽입하기 / Backspace keyCode

 

 

 

Reference: 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jeongju02&logNo=221517177533

https://ioerror.tistory.com/entry/JS-%EC%9D%B4%EB%A9%94%EC%9D%BC-%EC%A3%BC%EC%86%8C-%EC%9C%A0%ED%9A%A8%EC%84%B1-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0feat-%EC%A0%95%EA%B7%9C%EC%8B%9D