빈 수량을 0으로 읽지 않게: 숫자 입력의 세 가지 상태

아무것도 적지 않았는데 합계가 계산됩니다

수량칸을 비웠는데 화면에서 0개로 읽고 다음 단계로 넘어갈 수 있습니다. 자바스크립트 Number는 빈 문자열이나 공백 문자열을 0으로 바꿉니다. 계산에 쓰기 전에 값을 입력하지 않은 상태와 실제 0을 분리해야 합니다. 숫자 변환부터 하면 원래 어떤 입력이었는지 잃기 쉽습니다.

이 예제의 정책은 1~999의 정수 수량입니다. 0과 음수, 소수, 쉼표, 지수 표기와 앞자리 0은 받지 않습니다. 모든 숫자 입력의 보편 규칙이 아니라 한 수량 선택기가 허용할 형식을 명시한 것입니다.

빈 값·잘못된 형식·허용 수량으로 나눕니다

1e2를 Number로 바꾸면 100이 될 수 있어도 이 예제에서는 입력 표기 규칙에 맞지 않습니다. 반대로 물리 치수나 무게를 받는 필드라면 소수와 다른 범위가 필요할 수 있습니다. 먼저 값의 의미와 허용 표기를 정하고 변환을 연결합니다.

전체 문자열을 확인한 뒤 숫자로 바꿉니다

function readQuantity(raw) {
  const value = raw.trim();
  if (value === '') return { state: 'empty' };
  if (!/^[1-9]\d{0,2}$/.test(value)) {
    return { state: 'invalid' };
  }
  return { state: 'valid', quantity: Number(value) };
}

parseInt로 앞부분만 읽으면 “12개”에서 12를 얻는 식의 처리가 생길 수 있습니다. 사용자가 단위를 붙여도 받기로 한 화면인지, 숫자만 받는 화면인지 정하지 않은 상태에서는 편한 변환 함수가 입력 정책을 대신 결정하게 됩니다. 예제는 문자열 전체가 규칙에 맞아야 통과합니다.

앞뒤 공백을 제거할지 여부도 정책입니다. 여기서는 붙여넣기 때의 바깥 공백은 지우지만 중간 공백과 구분 기호는 거절합니다. 수정한 값은 화면에서 다시 읽을 수 있어야 합니다. 실패했을 때 입력을 모두 지우면 어디를 고쳐야 하는지 확인하기 어렵습니다.

기본 숫자 입력의 제약과 서버 검사를 함께 봅니다

<label for="quantity">수량</label>
<input id="quantity" type="number" min="1" max="999"
       step="1" required aria-describedby="quantity-help">
<p id="quantity-help">1~999 사이의 정수를 입력하세요.</p>

MDN의 number 입력 안내는 min·max·step과 빈 값의 제약을 다룹니다. 기본 컨트롤을 쓰더라도 업무 규칙에 맞는지 서버에서 다시 확인해야 합니다. 클라이언트의 형식 검사는 요청을 바꿔 보내는 경우까지 막는 보안 경계가 아닙니다.

예제 화면은 다양한 문자열을 비교하려고 텍스트 입력을 사용합니다. 실제 운영의 type=number와 가상 키보드 동작을 그대로 재현하는 도구는 아닙니다. 형태를 비교하는 예제와 배포할 입력 컨트롤은 목적에 맞춰 구분합니다.

오류 상태를 0개 주문처럼 계산하지 않습니다

유효한 수량을 얻기 전에는 상품 합계를 계산한 것처럼 표시하지 않습니다. 빈 상태에서는 입력 안내를, 오류 상태에서는 범위와 형식을 알려줍니다. 통과한 수량만 가격 계산으로 넘기면 “값을 모르지만 0으로 계산했다”는 상태를 만들지 않을 수 있습니다.

수량의 2가 세트 두 개인지 낱개 두 개인지도 별도 문제입니다. 형식이 맞은 뒤에는 세트 수와 구성 수량을, 가격 합계는 부과 단위별 비용 계산을 확인합니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• MDN: Number
• MDN: number 입력