본문 바로가기
Java script

Javascript_이메일 형식 확인 정규식, 핸드폰 번호 형식 자동 적용 정규식

by 디디찐 2022. 8. 9.
반응형

1. 이메일 정규식

이메일 형식으로 입력되었는지 확인하는 방법

// 이메일 형식 체크 정규식
function validEmail(obj){
    console.log(obj)
    if(validEmailCheck(obj)==false){ // 이메일 형식에 맞지 않을 때
        result.textContent = '이메일 형식으로 입력해주세요. ex) xxx@000.000' ;
        result.style.color = "red";
        // obj.value='';            // 형식에 맞지 않을 때 공백 처리
        obj.focus();
        return false;
    }else{
        result.textContent = '올바른 메일 형식입니다.' 
        result.style.color = "blue";
    }
}

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)

 

이메일 형식 ex) abc123@defgh456.ijk

validEmailCheck() 함수는 영문소문자, 숫자 입력되는지

" -" ," _"," ." 세개의 문자 입력을 허용하며 

도메인 주소 " ."  이전에 "@" 가 나와야 하고

도메인 주소 "."   이후에 2-3 문자는 와야된다. 

 

2. 이메일 정규식 실행결과

이메일 형식에 안 맞게 입력했을 때

 

이메일 형식에 맞게 입력했을 때

 

3. 휴대폰 번호 정규식

숫자만 입력받아 휴대폰 형식으로 자동 적용하는 방법

링크: https://gurtn.tistory.com/86

 

function phoneFormat(target) {
    // 특수문자 제거
    target.value = target.value.replace(/[^0-9]/g, "");

    const value = target.value.split("");

    const textArr = [
    // 첫번째 구간 (00 or 000)       
    [0, value.length > 9 ? 3 : 2],  // 9자리가 넘을 경우 첫번째 수는 3자리로
    // 두번째 구간 (000 or 0000)
    [0, value.length > 10 ? 4 : 3], // 10자리가 넘을 경우 두번째 수는 4자리로
    // 남은 마지막 모든 숫자
    [0, 4]							// 세번째 수는 나머지 숫자 
    ];

    // 총 3번의 반복 ({2,3}) - ({3,4}) - ({4})
    target.value = textArr
    .map(function(v)  { 
        return value.splice(v[0], v[1]).join("") 
    })
    .filter(function(text) { 
        return text 
    })
    .join("-");
}

4. 휴대폰 번호정규식 실행결과

전화번호 형식 예시 ex) 000-0000-0000  /  00-000-0000

자동으로 "-" 삽입

 

5. 전체 소스 코드

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
</head>

<style>
    div{
        text-align: left;
        font-family: system-ui;
        padding: 20px;
        width:200px
        height: auto;
     }

     
</style>
<body>
    <div>
        <div >
            <h4>Email형식 유효성 검사</h4>
            <input type = "text" id="emailCheck" /><span class = "result"></span>
        </div>
        <div>
            <h4>휴대폰 형식 적용</h4>
            <input type = "text" id="phoneCheck" maxlength="13" />
        </div>
       
             
    </div>
    <script type="text/javascript">

        const emailCheck = document.getElementById("emailCheck");
        const phoneCheck = document.getElementById("phoneCheck");
        const result = document.querySelector(".result");
       
        emailCheck.addEventListener("change",(e)=> {
            validEmail(e.target)
        });
        phoneCheck.addEventListener("input",(e) => {
            phoneFormat(e.target)
        });
           
        // 이메일 형식 체크 정규식
        function validEmail(obj){
            console.log(obj)
            if(validEmailCheck(obj)==false){
                result.textContent = '이메일 형식으로 입력해주세요. ex) xxx@000' ;
                result.style.color = "red";
                // obj.value='';
                obj.focus();
                return false;
            }else{
                result.textContent = '올바른 메일 형식입니다.'
                result.style.color = "blue";
            }
        }

        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)
           
        }
        //전화번호 체크
        function phoneFormat(target) {
            // 특수문자 제거
            target.value = target.value.replace(/[^0-9]/g, "");
       
            const value = target.value.split("");
       
            const textArr = [
            // 첫번째 구간 (00 or 000)
            [0, value.length > 9 ? 3 : 2],
            // 두번째 구간 (000 or 0000)
            [0, value.length > 10 ? 4 : 3],
            // 남은 마지막 모든 숫자
            [0, 4]
            ];
       
            // 총 3번의 반복 ({2,3}) - ({3,4}) - ({4})
            target.value = textArr
            .map(function(v)  {
                return value.splice(v[0], v[1]).join("")
            })
            .filter(function(text) {
                return text
            })
            .join("-");
        }

   
    </script>
</body>
</html>


반응형