React 회원가입 시 유효성 검사하기

회원가입 중 아이디 유효성 검사를 하는데,

영문자 + 숫자 , 6자리 이상으로 정규식으로 체크를 하여 진행했음.

//기존코드
let idCheck = /^(?=.*?[A-Za-z])(?=.*?[0-9]).{6,}$/; //영문자 + 숫자 , 6자이상
//주의 ! 특수문자 포함가능임.

하지만 특수문자가 아이디에 포함되면 안 돼서 

기존 정규식을 수정하거나, 특수문자를 제외하는 정규식을 만들어 한번 더 체크해야 했음.

기존 정규식을 수정하는 게 코드도 안 길어지고 좋아서 바로 갓글 검색.

영문자와 숫자만 입력할 수 있는 정규식으로 수정.

//수정코드
let idCheck = /^[A-Za-z0-9]{6,}$/;	//영문자 + 숫자만 , 6자 이상

if (idCheck.test(e.target.value)) {	
    setValidateUserId(true);	//검증 성공
} else {
    setValidateUserId(false);	//검증 실패 >> 에러메세지 출력
}

이와 같은 방법으로 상태 변수를 만들어서 검증 실패 시 false를 세팅한 뒤 에러 메세지를 출력함.

//위에서 체크한 상태값과 userId가 있는지 없는지 체크해서 에러 메세지를 출력함.
{!validateUserId &&
member.userId ? (
    <label
        style={{
            color: "red",
            lineHeight: 2.5
        }}
    >
        아이디는 6자이상
        15자이하 영문,숫자
        조합이여야됩니다.
    </label>
) : null}

실제 메세지 출력 화면

이런 식으로 원하는 곳에 메세지를 띄우면 됨!!

 

마찬가지로 비밀번호는

//비밀번호 유효성 검사코드
let passwordCheck =
    /^(?=.*?[A-Za-z])(?=.*?[0-9])(?=.*?[!@#$%^&*()-]).{6,}$/;	//정규식
if (passwordCheck.test(e.target.value)) {
    setValidatePassword(true);
} else {
    setValidatePassword(false);
}

이런 식으로 체크해서 아이디와 똑같이 메세지를 출력함.

 

 

📢참조(정규식 관련 사이트)

https://goddino.tistory.com/267

[js] 비밀번호 영문 숫자 조합 8자리 이상, 영문 숫자 특수기호 조합 8자리 이상 체크 (ft. 정규식)

https://velog.io/@jangws/JS-%EC% A0%95% EA% B7% 9C% ED%91% 9C% ED%98%84% EC% 8B% 9D% ED% 8A% B9% EC%88%98% EB% AC% B8% EC% 9E%90-%EC%88% AB% EC% 9E%90-%EB%93% B1-6766k 8d6

[JS] 정규표현식(특수문자, 숫자 등)