[jQuery] 소수점 기준 자리수 체크

 let priceNum = $("input[name=nftPrice]").val();
 let pattern = /^(\d{1,12})([.]\d{0,10}?)?$/;
                        
              if ( !pattern.test(priceNum) && priceNum != ''){
                  if( priceNum.indexOf('.') > 0 ) {
                     if( priceNum.toString().split(".")[0].length > 12  && priceNum.toString().split(".")[1].length > 10 )     {
                          $('#integralError').removeClass('hide');
                          $('#integralError').text('소수점 위로 최대 12자리까지 입력 가능합니다.');
                          $('#demicalError').removeClass('hide');
                          $('#demicalError').text('소수점 아래로 최대 10자리까지 입력 가능합니다.');
                               
                       } else if (priceNum.toString().split(".")[1].length > 10  &&  priceNum.toString().split(".")[0].length <  12){ 
                            $('#demicalError').removeClass('hide');
                            $('#demicalError').text('소수점 아래로 최대 10자리까지 입력 가능합니다.');
                                
                            
                        } else if (priceNum.toString().split(".")[1].length < 10  &&  priceNum.toString().split(".")[0].length >  12) {
                           $('#integralError').removeClass('hide');
                           $('#integralError').text('소수점 위로 최대 12자리까지 입력 가능합니다.');
                           $('#demicalError').addClass('hide');                               
		                    }                                           
                    } else if ( priceNum.indexOf('.') < 0 ) {
                       if(priceNum.toString().length > 12) {
	                       $('#integralError').removeClass('hide');
                         $('#integralError').text('최대 12자리까지 입력 가능합니다.');  
                         $('#demicalError').addClass('hide');                                                           
                       } 
                    }
                    
                  }  else {
                        $('#integralError').addClass('hide');
                        $('#demicalError').addClass('hide');

                    }        
                        
                };

소수점 기준 앞자리, 뒷자리 자리수 확인하기 

[기능]

1. 소수점 앞자리 12자리 입력 가능, 초과시 유효성 문구1이 나옵니다.

2. 소수점 뒷자리 10자리 입력 가능, 초과시 유효성 문구2가 나옵니다.

3  소수점 앞자리, 뒷자리 둘 다 초과 시, 유혀성 문구1, 유효성문구2가  같이 나옵니다.

 

 

[코드설명]

 

1. 정규식

let pattern = /^(\d{1,12})([.]\d{0,10}?)?$/

-숫자만 입력 가능 하며, 소수점 앞 12자리, 소수점 뒤 10자리 입력합니다.

 

2. 소수점이 있는지 없는지 확인합니다.

- indexOf 를 사용하여 소수점이 있는지 없는지 확인합니다.

소수점이 있다면 0보다 큰 값을 반환할 것 이고, 소수점이 없다면 -1을 반환 할 것입니다

[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Array.prototype.indexOf() - JavaScript | MDN

 

2-1. 소수점이 있을 때

자리수 체크를 위하여 문자열의 갯수를 확인

- PriceNum.toString().split(".")[0].length

- toString() : 숫자 타입을 문자 타입으로 변경

- split(”.”)[0] / split(”.”)[1] : split() 은 하나의 텍스트를 기준이 되는 텍스트로 분리하여 여러개의 값을 가진 배열로 변환 후 반환하여 줍니다.

위의 코드에서 split(”.”)[0]은 소수점 앞 / split(”.”)[1] 은 소수점 뒷자리 입니다.

[조건]

- 소수점 앞 12자리 초과 , 소수점 뒤 10자리 초과

- 소수점 앞 12자리 초과, 소수점 뒤 10자리 미만

- 소수점 앞 12자리 미만, 소수점 뒤 10자리 초과

 

2-2. 소수점이 없을 때

[조건]

1 ) PriceNum.toString().length이 12개 초과 했을 때

See the Pen Untitled by 현정 (@Celine__509) on CodePen.