[정규식/RegExp] 실수 입력 시 정수부, 소수부 자리 제한(소수점 이하 자리 제한)/ input element에서 사용하기/ 음수를 포함 하는 경우

실수 정규식

/^([1-9]{1}\d{0,1}|0{1})(\.{1}\d{0,2})?$/g

정수는 2자리, 소수점 이하 2자리 까지 가능

정수부가 0으로 시작하면 1보다 커야한다 -> 023 불가능 0.34 가능

소수부 없어도 가능.  

input 엘리먼트에서 입력이 발생할 때 마다 반영하기 위해 작성한 정규식이므로

0. or 0.0 or 0.40 이와 같은 케이스는 통과시킨다

 

필요에 따라 수정할 수 있게 하나 하나 분석해보자

식	해석
[1-9]	1에서 9까지에 해당하는 숫자가
[1-9]{1}	1번 대응되고
[1-9]{1}\d	숫자(0-9)가
[1-9]{1}\d{0,1}	0~1번 대응된다
[1-9]{1}\d{0,1}|	또는
[1-9]{1}\d{0,1}|0	0이
[1-9]{1}\d{0,1}|0{1}	1번 대응된다
^([1-9]{1}\d{0,1}|0{1})	위의 내용으로 시작한다
\.	. 이
\.{1}	1번 대응되고
\d{0,2}	숫자가 0~2번 대응된다
(\.{1}\d{0,2})?	해당 내용이 0이나 1번 대응된다 ({0,1}과 동일)
(\.{1}\d{0,2})?$	위의 내용으로 끝이난다

끝에 $를 붙이지 않으면 쓰레기 문자들이 끝에 붙어있어도 테스트를 통과하기 때문에 꼭 붙여줘야 한다!

 

regExp.test() 결과 

( enter 구분은 개별 케이스로 간주)

case	result
0 12 50	true
124 1000	false (자리수는 요구조건에 맞게 조절 가능)
034 00 00.	false (맨 앞자리가 0이 오는 경우는 소수 표현을 하기 위함)
0.1 0.03 0.50	true
0.0 0.00	true
0.1234 0.32435	false (자리수)

 

음수 포함 정규식

음수도 가능하게 하고 싶다면 아래 식을 사용하면 된다.

'-' 문자가 ? 있거나 없거나를 추가 했다

/^(-?([1-9]{1}\d{0,1}|0{1}))(\.{1}\d{0,2})?$/g

 

input element event 사용

input 엘리먼트에서 입력이 발생할 때 마다 반영하고 싶은 경우는 해당 이벤트안에서 다음과 같이 사용하면 된다.

const regExp = /^([1-9]{1}\d{0,2}|0{1})(\.{1}\d{0,1})?$/g;
if (!regExp.test(value)) {
	value = value.substr(0, value.length - 1);
}

 

정규식 테스트 사이트

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

 

필요할 때 마다 검색하고 수정하고 만들다 보니 정확하지 않을 수 있습니다 알려주세요~