React에서 아이디, 비밀번호 유효성 검사하기

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

https://ryukato.github.io/javascript/2016/01/27/replace-some-text-with-regex.html

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

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

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

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

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

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

 

 

2. 정규식 존재여부 체크 방법

 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 이상이다. (존재한다는 뜻)

 

 

3. 예제

 

 1) input에 onChange 와 value 속성 입력

     : onChange 함수에 입력 시 부여할 기능 / value에는 state를 선언한다.

    const [AlphaNum, setAlphaNum] = useState("");
    
    const IsAlphaNume=(e)=>{
        const curValue=e.currentTarget.value;
        const notNum=/[^a-z0-9]/gi;

        setAlphaNum(curValue.replace(notNum,''))
    }
    
    <input type="text" value={AlphaNum} onChange={IsAlphaNume}/>

 

 

※※ 문자의 연속성, 반복성 등 체크

 

-반복성(동일문자 반복) : 위 정규식을 이용한다.

 

-연속성 체크(123, abc...) :

 

http://blog.naver.com/lmg2738/220046845773

screencapture-blog-naver-lmg2738-220046845773-2020-07-06-12_25_20.png

5.70MB

let SameLetter_0=0;
        let SameLetter_1=0;
        let SameLetter_2=0;
        for(var i=0; i<curValue.length; i++){
            var chr_pass_0;
            var chr_pass_1;
            var chr_pass_2;
            if(i>=2){
                chr_pass_0=curValue.charCodeAt(i-2);
                chr_pass_1=curValue.charCodeAt(i-1);
                chr_pass_2=curValue.charCodeAt(i);
                //동일 문자 체크
                if((chr_pass_0 ==chr_pass_1) && (chr_pass_1 == chr_pass_2)){
                    SameLetter_0++;
  ★★★        }else{
                	SameLetter_0=0;
                }
                //연속성(+) 체크
                if(chr_pass_0 - chr_pass_1 == 1 && chr_pass_1 - chr_pass_2 == 1){
                    SameLetter_1++;
                }else{
                	SameLetter_1=0;
                }
                //연속성(-) 체크
                if(chr_pass_0 - chr_pass_1 == -1 && chr_pass_1 - chr_pass_2 == -1){
                    SameLetter_2++;
                }else{
                	SameLetter_2=0;
                }
            }
        }
        
        const NotSafeConfig=SameLetter_0>0 || SameLetter_1>0 || SameLetter_2>0;

 

: SameLetter_0 ( or 1 or 2)가 0 보다 크면 반복성(연속성)이 문장에 존재하는 것이다.

 

**이때 위에서 ★★★ 표시가 있는 줄을 주목하자.

else {... = 0} 문을 작성하면 >> 반복성(연속성)이 체크되는 만큼 숫자가 증가하다가, 반복되지 않은 문자를 입력하면 다시 0으로 복귀한다. 

else {... = 0} 문을 삭제하면 >> 반복성(연속성)이 체크되는 만큼 숫자가 증가하다가, 반복되지 않은 문자를 입력해도 증가한 만큼의 숫자로 머물러 있다. 

 

따라서 alert 경고를 줄 경우에는 else문이 적합하고,

그저 반복성(연속성)의 개수를 체크해야할 때는 0으로 reset되지 않도록 else문을 삭제하면 된다.

 

 

 

**참고사이트

-hooks에서 정규식 사용 예제

https://birthxmas.tistory.com/160

 

-classComponent에서  (함수 사용하는 예시 참고할 것)

https://stackoverrun.com/ko/q/11843664

https://bigscript.tistory.com/23

 

**유효성 검사 모음

https://java119.tistory.com/71