Javascript 숫자만 정규식 - javascript susjaman jeong-gyusig

Inputbox Validtion Numbers Only

자바스크립트 방법 중 가장 많이 쓰이는 방법 중 하나가 input 텍스트 박스 내에 숫자만 입력하게 하는 방법이다.

다양한 개발 방법 중 자바스크립트 이용하는 방법과 정규식의 인라인으로 작성하는 방법을 알아보자.

1. 정규식 이용한 방법

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/>

이렇게 onKeyup 속성을 넣어서 정규식을 입력하면 숫자외에 입력이 되지않는다.

2. 자바스크립트 이용한 방법

<input type="text" onkeypress="inNumber();"/>
<!--자바스크립트를 불러오는 속성입력-->

function inNumber(){
          if(event.keyCode<48 || event.keyCode>57){
             event.returnValue=false;
          }
}

자바스크립트로 키보드 누르는 키를 제어함으로써 숫자만 입력가능하도록 할 수 있다.

이번에 Spring을 이용한 아파트 실거래가 검색 홈페이지를 만들면서 xml데이터를 추출할 일이 있었다.

원하는 가격 내 검색기능을 구현하기 위해 데이터에 들어있는 실 거래가와, 사용자가 입력한 최소, 최대값을 비교해서 

Client에게 뿌려주게 하려 했다.

하지만 실거래가 데이터가 13,000 , 25,000, 5,000 이런식으로 문자열과 숫자가 섞인 데이터였다.

ParseInt()를 이용하여 실거래가를 int형으로 변환하려고 했으나 ','가 섞여있어서 이상한 데이터가 나왔다.

이를 해결하기 위해 JavaScript에서 제공하는 함수인 replace와 정규식을 이용하여 숫자와 문자가 섞인 데이터에서 숫자만 뽑아와서 비교해주는 기능을 작성하였다.

숫자가 아닌 문자를 모두 선택하는 정규식인 /[^0-9]/g 를 이용하여 문자를 ""로 바꿔주면 된다.

예시)

var regex = /[^0-9]/g;		// 숫자가 아닌 문자열을 선택하는 정규식
var result = items[i].recentPrice.replace(regex, "");  // 문자열에서 숫자만 추출하는 코드
if(parseInt(result) > parseInt(min) && parseInt(result) < parseInt(max))
{	
 	priceSearchData.push(items[i]); // 검색범위 내 있는 데이터 저장
}

먼저 regex에 = /[^0-9]/g를 넣어준다

***

/[^0-9]/g

의 설명을 드리자면

정규식 형식으로 / 사이에

모든 숫자를 매칭하는 [0-9]에

부정을 뜻하는 ^ 를 붙여

[^0-9] 를하면 모든 숫자를 제외한 문자만을 매칭하고

발생할 모든 패턴에 대한 전체 검색을 뜻하는 플래그인 g를 붙여 만듭니다.

출처 : https://jsikim1.tistory.com/38

name값을 onlyNumber로 셋팅한 input에 'input' 이벤트리스너를 걸어주었다.

input이 여러개일 때에는 forEach 또는  for문을 이용해서 이벤트 리스너를 걸어주면 된다.

• 숫자 정규식 : /[^0-9]/g
• input event : 키보드 이벤트 뿐만 아니라 어떤 방법으로든 input의 value값이 변경된 직후에 사용된다. 

정규식을 이용해 숫자가 아닌 값이 입력됐을 시 ''(공백)으로 바꿔서 숫자만 남기도록 한다.

document.querySelector('input[name="onlyNumber"]').addEventListener('input', function(e){
	e.value = e.value.replace(/[^0-9]/g,'')
})

[javascript/jquery] 자바스크립트 숫자와 하이픈만 허용하는 정규식

javascript 에서

정규식을 사용하다보면

전화번호와 같은 입력란에

숫자와 하이픈만 허용해야하는 경우가 있습니다.

그럴때는

아래 정규식을 이용하시면 됩니다!

/[^0123456789-]/g

예를들어

val 라는 값을 전달받아서

해당 값에 숫자와 하이픈을 제외한

다른 문자가 들어있는지 확인하고 싶으면

아래와 같이 정규식을 사용하시면 됩니다!

if(/[^0123456789-]/g.test(val)){
    // 숫자와 하이픈이 아닌 기타 문자가 들어있는 경우
}

참고들 하세요!

[javascript/jquery] javascript 영문과 숫자만 허용하는 정규식

javascript 에서

아이디 같은 부분의

입력값을 체크할때,

영문이나 숫자만 입력을 받아야 하는 경우가 있습니다.

그럴때는

아래 나와있는 정규식을 이용하시면 됩니다.

var regex = /^[A-Za-z0-9+]*$/; 

추가적으로

영문이나 숫자만 입력을 받지만,

6~12 자리만 입력을 받으려면

아래와 같이 추가해서 사용하시면 됩니다!

var regex = /^[A-Za-z0-9+]{6,12}$/; 

참고들 하세요!

티스토리 뷰

조금 전 자바(java)에서 숫자체크하는 방법을 포스팅하였다~

자바스크립트도 동일하게 포스팅~~

자바스크립트에서도 정규식을 사용하여 숫자체크를 할 수 있다~~

var s = "123" ;                 //체크할 문자

var chkStyle = /\d/ ;      //체크 방식(숫자)

if(chkStyle.test(s)){

    alert("숫자지롱");

}else{

    alert("숫자가 아니지롱");

}

위와 같이 하면 숫자체크가 가능하다.

굵은 파란색 글씨로 표현된 부분이 정규식 부분인데~

숫자체크를 할 경우엔

/\d/

/[0-9]/

를 사용하면 되고,

영어 소문자 추가하려면

/[a-z0-9]/

를 사용하면 된다.

영어 대문자 추가하려면

/[a-zA-Z0-9]/

를 사용하면 된다.

추가적으로! 문자열 시작조건을 주려면 ^ 를 앞에 붙이면 된다.

/^[A-Z]/

문자열 시작이 영어 대문자로 시작한다는 의미이다.

그리고 자리수를 제한하려면

/[0-9]{5,10}$/

을 써주면, 숫자만 입력 가능하고, 5~10자리로 제한한다는 의미이다~

정규표현식에 대해서 더 자세히 알고 싶다면!!!

아래 표를 참고하자!!!