[JavaScript] 이메일, 핸드폰 번호, 생년월일 유효성 검사 (정규식)

 

이번 프로젝트 마무리 단계로 회원가입 join 시 userid 역할인 email, 핸드폰 번호, 생년월일 유효성 검사를 추가했다. 정규식을 사용하여 코드를 더 간결하게 만들 수 있었다. 😀

 

 

Email 형식 유효성 검사

-> JS addEventListener('change', callback) 사용 

//  EMAIL (userid) 형식 유효성 검사 
let userid = document.querySelector('#userid')
userid.addEventListener('change',(e)=>{  // html 의 onchange="validEmail(this)"와 동일 
    validEmail(e.target)
})
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)
}

반응형

userid를 html에서 가져와 addEventListener('change', callback)을 주었다. 

e.target은 해당 userid input 전체가 불러와 진다. 

ex) console.log(e.target)

validEmail 함수로 위의 내용이 obj라는 인자값으로 들어가 validEmailCheck 함수로 다시 들어가서 해당 값이 false라면 아래 명령이 실행된다. validEmailCheck 함수에서는 해당 userid input의 value -> email을 작성한 부분이 pattern 정규식과 일치하는지 확인 후 return 한다. 

 

html 에 onchange="Fn()" 을 사용해도 된다!

 

 

 

핸드폰 번호 유효성 검사

    let mobile = document.querySelector('#mobile');

    // 전화번호 유효성 검사  
    let mobile_pattern = /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}/
    if(!mobile_pattern.test(mobile.value)) {
    	swal('핸드폰 번호를 확인해주세요.');  // swal == alert대용 
        mobile.value=''; 
        mobile.focus(); 
        return 0; }

mobile 값을 가져와 value(고객이 입력한 핸드폰 번호) 가 mobile_pattern 정규식에 맞지 않다면 (test로 진행) 아래 명령을 실행 한다. 

 

 

 

생년월일 유효성 검사

    let userbirth = document.querySelector('#userbirth');
 
    // 생년월일 유효성 검사
    let birth_pattern = /^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
    if(!birth_pattern.test(userbirth.value)){
    	swal('생년월일 8자리를 입력해주세요'); 
        userbirth.value=''; 
        userbirth.focus(); 
        return 0; 
   }

위의 핸드폰 유효성 검사와 같은 원리로 실행된다. 

 

 

---

 

 

유효성 검사 정규식 모음 

 

Email 유효성 검사 정규식

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

핸드폰 번호 유효성 검사 정규식

/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}/

생년월일 유효성 검사 정규식

/^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/

 

 

 

 

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

https://blckchainetc.tistory.com/238

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