실시간 인도 루피 형식 지정을 위한 HTML 폼 구현 및 백엔드 데이터 전송 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 대상자: 웹 폼 개발자, 국제화 지원 필요 시스템 개발자
• 난이도: 중간 (자바스크립트 기초 이해 필요)

핵심 요약

• #formattedAmount와 #rawAmount 두 개의 입력 필드를 사용하여 인도식 루피 형식(1,00,000) 표시와 백엔드 전송 시 숫자 원본(100000) 처리
• formatIndianNumber() 함수를 통해 콤마 삽입 로직 구현
• input 및 submit 이벤트 핸들러로 실시간 형식 변환 및 원본 값 저장

섹션별 세부 요약

1. 문제 정의

• HTML5 number 입력 필드는 인도식 루피 형식(1,00,000)을 지원하지 않음
• 외부 라이브러리(Cleave.js 등)를 사용하지 않고 자바스크립트 내부 로직으로 해결
• 백엔드에 콤마 제거된 숫자(100000) 전송

2. 구현 방법

• #formattedAmount: 사용자에게 보이는 콤마 포함 입력 필드
• #rawAmount: 숨은 입력 필드로 원본 숫자 저장
• formatIndianNumber() 함수:

- 정수 부분을 2자리 단위로 콤마 삽입

- 소수 부분 처리 포함

- replace(/^0+/,'')로 전도 영문자 제거

3. 이벤트 핸들러

• input 이벤트:

- #formattedAmount의 값을 콤마 제거 후 숫자만 추출

- #rawAmount에 원본 숫자 저장

• submit 이벤트:

- #rawAmount에 최종 원본 값 저장

- 백엔드로 {"amount":"100000"} 형식 전송

4. 기능 요약

• 인도식 루피 형식 지원 ✅
• 소수 처리 가능 ✅
• 숨은 입력 필드 사용 ✅
• 외부 라이브러리 없음 ✅
• 간단한 통합 가능 ✅

결론

• type="number" 속성은 콤마와 충돌하여 사용 금지
• pattern="\d+(,\d{2})?" 또는 maxlength="15"로 검증 추가
• 소수 지원은 정규식 및 형식 함수 조정 필요
• 자바스크립트 내부 로직으로 백엔드 데이터 전송 간소화 가능