[React] react 에서 핸드폰번호, 비밀번호, 이메일 유효성 검사하기 - 떽떽대는 개발공부

 

 

웹페이지를 구현할 때 핸드폰번호, 비밀번호, 이메일 양식에 따라 유효성 검사를 해야할 때가 있다.

react 에서 유효성 검사하기는 아래와 같다.

import React from 'react';

const Test = () => {
    // 핸드폰번호 유효성 검사
    const checkPhonenumber = (e) => {
        // '-' 입력 시
        var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/
        // 숫자만 입력시
        var regExp2 = /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/
        // 형식에 맞는 경우 true 리턴
        console.log('핸드폰번호 유효성 검사 :: ', regExp.test(e.target.value))
    }

    //비밀번호 유효성 검사
    const checkPassword = (e) => {
        //  8 ~ 10자 영문, 숫자 조합
        var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/
        // 형식에 맞는 경우 true 리턴
        console.log('비밀번호 유효성 검사 :: ', regExp.test(e.target.value))
    }

    // 이메일 유효성 검사
    const checkEmail = (e) => {
        var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
        // 형식에 맞는 경우 true 리턴
        console.log('이메일 유효성 검사 :: ', regExp.test(e.target.value))
    }

    return(
        <div>
            <div>
                <input type='text' placeholder='phone number' onBlur={checkPhonenumber}/>
            </div>
            <div>
                <input type='password' placeholder='password' onBlur={checkPassword} />
            </div>
            <div>
                <input type='email' placeholder='email' onBlur={checkEmail} />
            </div>
        </div>
    )
}

export default Test;

 

위와 같이 간단하게 예제를 작성하게 되면 아래와 같은 결과가 나온다.

 

핸드폰번호 유효성 검사할 때 나는 '-' 가 붙어있는 것을 기준으로 했는데 필요에 따라 숫자만 입력한 경우에 대한 검사를 시행해도 좋다.

비밀번호 유효성 검사 시에도 예제는 영문, 숫자 포함 8~10 글자지만 필요에 따라 변경해서 사용하면 된다.

결과는 아래와 같다.

• 유효한 값일 때

 

• 유효하지 않은 값일 때