[React]아이디, 비밀번호 유효성 검사하기(정규식)

길현민·2022년 7월 24일

목록 보기

12/28

리엑트로 로그인과 회원가입에 대한 코드작성을하는도중 유효성 검사를 해야하는 상황에서 함수로 실행하는것에 굉장한 고난을 맞이했는데 구글링하는중에 정규식을 알게되었다.

숫자, 영어 등을 구분하는 javascript 정규식

-숫자 : /[0-9]/gi

-숫자가 아닌 모든 문자 : /[^0-9]/g

-대, 소문자 영문 : /[a-z]/gi

-특수문자 : /[~!@#$%";'^,&*()_+|</>=>`?:{[\}]/g

-공백 : /^\s+|\s+$/g

-동일한 문자 연속 3자 이상 : /(\w)\1\1/g

정규식 존재여부 체크 방법

1) replace 함수 이용
replace 함수 예시) text . replace( '기존문자', '바꿀 문자' )

아래 예제처럼 영어가 아닌 것(^ 표기)이나 영어인 것을 공백('')으로 대체한다.

( setState( e.currentTarget.value.replace( 정규식, '' ) )

2) test 함수 이용
test 함수란) 정규식에 boolean 값을 얻는다.

ex) 정규식.test( string )
```
>> if 문 이용 

>> if ( e.currentTarget.value == ' ' || 정규식.test(e.currentTarget.value) )
```

2) search 함수 이용
search 함수란) 문자가 문장에 위치한 위치 값을 찾는다.

ex) e.currentTarget.value.search(정규식) > 0 : 숫자의 위치값이 0 이상이다. (존재한다는 뜻)