input pattern 활용

0. input의 pattern 속성

나는 숫자 입력값을 받았을 때, 3자리 단위마다 ,를 넣은 형태로 보여주는 input을 만들려고한다.

여러 방법을 찾아보다가 input 태그의 속성으로 pattern을 사용할 수 있다는 것을 알게됐다.
pattern 속성은 HTML5에서 추가된 속성으로, input 요소의 값을 검증하는데 사용된다. 정규표현식 패턴을 입력받아 해당 패턴에 맞는 문자열만 입력 가능하도록 제한하는 속성이다.
예를 들어, pattern 속성에 ^[a-zA-Z]*$와 같은 정규표현식을 지정하면, 입력 가능한 값이 알파벳 대문자 또는 소문자로만 이루어진 문자열로 제한됨.
또한, 입력값이 올바르지 않을 때 표시될 오류 메시지를 title 속성을 사용하여 작성 가능함. pattern 속성은 required 속성과 함께 사용하면, 필수 입력 값이 지정된 패턴에 맞지 않을 경우에도 오류 메시지를 표시할 수 있다.

// input pattern 예시
<label>
  주민등록번호:
  <input type="text" name="jumin" pattern="^[0-9]{6}-[1-4]{1}[0-9]{6}$" required title="주민등록번호를 올바르게 입력하세요. (예: 123456-1234567)" />
</label>

따라서 나는 위와 같은 속성을 이용해서 입력값이 1~3자리 숫자와 , 그리고 세자리 숫자가 반복되는 패턴의 문자열만 받으려고 한다.

<input type="text" pattern= "\d{1,3}(,\d{3})*"

이렇게 작성하고

function Inputs({ smallBtnList }) {
  const [data, setData] = useState({ name: "", price: 0 });

  const handleChange = (e) => {
    const { id, value } = e.target;
    let price = value;
    if (id === "price" && !!price) {
      price = parseFloat(value.replace(/,/g, ""));
      price = price.toLocaleString();
    }
    setData({ ...data, [id]: price });
  };

  const handleClickSave = (e) => {
    if (data.name.length < 1 || data.price.length < 1) {
      return alert("이름과 가격 모두 입력해주세요!");
    }
    alert(`name : ${data.name} price : ${data.price}`);
  };

  return (
    <StForm>
      <label htmlFor="name">이름</label>
      <StInp value={data.name} id="name" type="text" placeholder="이름을 입력하세요." onChange={handleChange} />
      <label htmlFor="price">가격</label>
      <StInp pattern="\d{1,3}(,\d{3})*" value={data.price} id="price" type="text" placeholder="가격을 입력하세요." onChange={handleChange} />
      <Btns btnList={smallBtnList} handleClickSave={handleClickSave} />
    </StForm>
  );
}