[React Native] 정규식으로 TextInput 양식 제어하기

Beanzinu·2021년 10월 29일
0

React-Native

목록 보기
4/6

What I Want

사용자가 입력한 데이터들에 대해서 양식 검사

How to Do

정규식

정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용하는 패턴이다.

정규식을 만드는 방법

  1. '/'로 감싸는 패턴 => 정규식이 상수일때 사용

    var re = /ab+c/
  2. RegExp 객체의 생성자 함수를 호출하여 사용 => 정규식이 실행 시점에 컴파일됨.

    var re = new RegExp("ab+c")

정규식 패턴

  1. 단순 패턴

    /abc/ => 문자열에서 정확히 'abc'가 나타나야 대응됩니다.

  2. 특수 패턴
    참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

입력이 숫자로 이루어지고 10자리로 이루어져야 한다

  1. [xyz] 문자셋(Character set) 입니다. 이 패턴 타입은 괄호 안의 어떤 문자(이스케이프 시퀀스까지 포함)와도 대응됩니다. 점(.) 이나 별표 (*) 같은 특수 문자는 문자셋 내부에서는 특수 문자가 아닙니다. 따라서 이스케이프시킬 필요가 없습니다. 하이픈을 이용하여 문자의 범위를 지정해줄 수 있습니다.
    예를 들어, 패턴 [a-d] 는 패턴 [abcd] 와 똑같이 동작하며, "brisket"의 'b' 에 일치하고, "city"의 'c' 에 일치합니다. 패턴 /[a-z.]+/ 와 /[\w.]+/ 는 "test.i.ng" 전체 문자열이 일치합니다.

2.{n} 앞 표현식이 n번 나타나는 부분에 대응됩니다. n은 반드시 양의 정수여야 합니다. 예를 들어, /a{2}/는 "candy,"의 'a'에는 대응되지 않지만, "caandy,"의 모든 a 와, "caaandy."의 첫 두 a 에는 대응됩니다.

var format = /[0-9]{10}/ ;
format.test(value) ; // value 변수에 따라 true / false

profile
당신을 한 줄로 소개해보세요.

0개의 댓글