[자바스크립트] 자바스크립트(JavaScript) 전화번호, 생일, 시간 정규식, 하이픈 자동 생성 코드

//전화번호 정규식
  const validatePhone = phone => {
    const regex = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
    return regex.test(phone);
  }

//생일 정규식
    const validateBirth = aBirth => {
        const regex = /^([0-9]{4})-?([0-9]{2})-?([0-9]{2})$/;
        
        return regex.test(aBirth);
    }​

//시간 정규식
	const validateTime = time => {
        const regex =/^([01][0-9]|2[0-3]):([0-5][0-9])$/; 
        return regex.test(time);
    }

 

 

 

---

 

 

팀원이 작성한 정규식이다!

​

처음에 01로 시작하도록 해서 0,1,6,7,8,9가 가능하도록 한다.

​

" - " 다음에는 0~9 사이의 숫자를 3글자, 4글자가 가능하다

​

" - " 마지막은 4글자만 가능하다

​

/^~~~$/ 시작과 끝을 의미한다

​

​

그리고 자동 하이픈 내용도 포함해보면

 

  //자동 하이픈 생성
  const autoHyphen = (target) => {
    return target.replace(/[^0-9]/g, '').replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, "$1-$2-$3").replace(/(\-{1,2})$/g, "");
  }

 

target이 아마 들어갈 값이다.

/ [ ^ 0 - 9 ] / g : 0~9 사이의 숫자가 아니면 '' 로 입력하도록한다. 즉 taget을 숫자만 가능하도록

​

/ ^ ( \d{0,3})(\d{0,4})(\d{0,4})$/g , "$1-$2-$3")

: 첫번째 3글자 두번째 4글자 마지막 4글자를 $1, $2, $3으로 지정해서 자동으로생성하도록함

​

/(\-{1,2})$g,"" : 하이픈이 1개에서 2개 생성하도록 한다. 1,2 개인지 검사하는 것이다

​

​

​

핸들러 내용이다

  //전화번호 핸들러
  const handlePhoneChange = (phone) => {
    const changedPhone = autoHyphen(phone);
    setPhone(changedPhone);
    setErrorMessagePhone(
      validatePhone(changedPhone) ? "올바른 휴대전화 번호입니다" : "올바른 휴대전화 번호가 아닙니다."
    );
    setOkPhone(validatePhone(changedPhone));
  }

 

​

핸들러에서는 입력한 값을 가지고 와서

1. changPhone이라는 변수에 저장

2. autoHyphen()을 실행한 값을 저장( autoHyphen : 자동으로 하이픈 생성한 코드)

3. setPhone에 저장하면 phone변수로 사용할 수 있다.

4. setErrorMessagePhone은 삼항 연산자로 정규식을 확인하고 에러 메세지를 저장한 내용이다.

5. validatePhone은 정규식 확인하는 코드이다

6. setOkPhone은 정규식 확인 후 True / False한 값을 저장한다.

​

​

이렇게 휴대폰 자동 하이픈 생성 코드이다

​

​

다음은 생일 자동하이픈 생성 코드이다.

​

휴대폰 자동 하이픈 생성 코드와 비슷하다!

설명은 생략하겠다

 

 

    //생일
    const validateBirth = aBirth => {
        const regex = /^([0-9]{4})-?([0-9]{2})-?([0-9]{2})$/;
        
        return regex.test(aBirth);
    }

    //자동 하이픈 생성
    const autoHyphen = (target) => {
        return target.replace(/[^0-9]/g, '').replace(/^(\d{0,4})(\d{0,2})(\d{0,2})$/g, "$1-$2-$3").replace(/(\-{1,2})$/g, "");
    }

    //애완동물 생일 핸들러
    const handleBirthChange = (aBirth) => {
        const changeBirth = autoHyphen(aBirth);
        setAnimalBirth(changeBirth);
        setErrorMessageBirth(
            validateBirth(changeBirth) ? "올바른 형식입니다" : "생일을 올바르게 입력해주세요"
        );
        setOkBirth(validateBirth(changeBirth));
    };

 

 

 

시간 정규식 및 자동 땡땡 생성

 

    const validateTime = time => {
        const regex =/^([01][0-9]|2[0-3]):([0-5][0-9])$/; 
        return regex.test(time);
    }

    const handleChangeTime = (time) => {
        const changedTime = autoHyphen(time);
        console.log(changedTime);
        setTime(changedTime);
        setOKTime(validateTime(changedTime));
    };

    //자동 땡땡 생성
    const autoHyphen = (target) => {
        return target.replace(/[^0-9]/g, '').replace(/^(\d{2})(\d{2})$/g, "$1:$2").replace(/(\:{1})$/g, "");
    }

 

이렇게 콘솔창에는 나온다

 

 

handler를 이벤트 발생하는 onChangeText에 넣으면 이벤트가 발생할때마다 확인하는 것이다

즉,

<TextInput .... onChangeText = { (e) => {handleChange(e)} />

다른 value나 place뭐시기는 생략하겠댜ㅎㅎㅎ

 

이런 정규식은 회원가입할때나 값 입력할 때 양식을 맞춰야 하는 경우에 자주 사용하는 것이다