펀딩 개설 > 펀딩 정보입력 페이지 휴대폰 번호 인풋필드 검증 기능 추가

[hyerinxx]

배송 정보 중 휴대폰 번호 인풋필드에 입력 데이터 검증 기능을 추가하면 좋겠어요. 전체적으로 /src/components/common/PriceInputComponent.jsx를 참고해 주세요!

1. 숫자 외 다른 문자를 입력하지 못하도록 막기

입력 데이터가 변경될 때마다 숫자 외 다른 문자를 삭제하여 구현할 수 있습니다.

예시 PriceInputComponent.jsx

const handlePriceChange = (event) => {
  let input = event.target.value;
  input = input.replace(/[^0-9]/gi, ''); // 숫자 외 모든 문자 제거
  setPrice(Number(input));
};

return (
  <SInput
    onChange={handlePriceChange}
  />
);

2. backspace 키를 입력하여 마지막 문자를 삭제하기

1번의 코드를 사용할 경우, backspace키를 입력했을 때 backspace 문자 또한 제거하기 때문에 정상적으로 삭제 기능이 작동하지 않아, 수동으로 삭제 기능을 구현해야 합니다.

예시 PriceInputComponent.jsx

const handlePriceKeydown = (event) => {
  if (event.key === 'Backspace') {
    let input = event.target.value;
    input = input.replace(/[^0-9]/gi, ''); // 숫자 외 모든 문자 제거
    input = input.slice(0, -1); // 마지막 숫자 삭제
    setPrice(Number(input));
  }
};

return (
  <SInput
    onKeyDown={handlePriceKeydown}
  />
);

3. 입력된 숫자를 포맷팅하여 사용자에게 보여주기

예시 PriceInputComponent.jsx

return (
  <SInput
    value={price ? `${price.toLocaleString()}원` : ''}
  />
);

예시는 가격 포맷팅으로, 휴대폰 번호 포맷팅과 많은 차이가 있습니다.

휴대폰 번호는 맨 앞에 0이 들어가므로 입력 데이터를 저장할 때 Number로 형 변환하면 안됩니다! 1번과 2번의 예시를 참고할 때 주의하세요.

또, 사용자에게 입력 데이터를 포맷팅하여 보여줄 때, .toLocaleString()과는 다른 방식을 사용해야 합니다. 이 링크를 참고하세요! [JS] 전화번호 자동 하이픈(-) 정규식

[hyerinxx]

제보: 조아령(@rwaeng)

[ch9968]

넵 확인했습니다!