[React] 회원가입 / 로그인 - 이메일 및 비밀번호 정규식

회원가입이나 로그인을 하기 전에 이메일/아이디와 비밀번호의 유효성을 검증할 정규식을 정리해보려고 한다.

이메일, 비밀번호 정규식

const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/;

const passwordRegEx = /^[A-Za-z0-9]{8,20}$/

• /^ : 시작

• $/ : 끝

• [A-Za-z0-9] : 영문 대소문자 혹은 숫자로 시작

• ([-_.][A-Za-z0-9]) : 두 번째 글자부터는 영문 대소문자 혹은 숫자이며 - _ .이 들어갈 수 있음

• * : 문자 또는 숫자가 0개 이상 나타남

• @가 중간에 반드시 들어가야 함

• 도메인 부분도 마찬가지로 영문 대소문자 혹은 숫자로 시작하며 그 다음부터-_.이 들어갈 수 있음

• . 이 최소한 하나는 반드시 들어가야 함

• .뒤에 com과 같은 최상위 도메인이 들어갈 자리 2-3자리 지정

  + 참고) i : 전체에 대해서 대소문자를 구분하지 않음
  

정규식 메서드

• exec() : 문자열에서 일치하는 부분을 찾음. 일치한 문자열 및 기억한 모든 부분 문자열을 배열로 반환하거나 일치하는 부분이 없을 경우 null을 return함
• test() : 문자열에 일치하는 부분이 있는지 확인하고, true 혹은 false를 return
• match() : 모든 일치를 담은 배열을 반환, 일치가 없으면 null return
• search() : 문자열에서 일치하는 부분을 탐색함. 일치하는 부분의 인덱스를 리턴하거나, 일치가 없는 경우 -1을 반환함
• split() : 문자열에서 일치하는 부분을 찾고, 그 부분을 대체 문자열로 대체함

//Signup.jsx
const [username, setUsername] = React.useState("");
const [password, setPassword] = React.useState("");
const [passwordChk, setPasswordChk] = React.useState("");


//email& 비밀번호 정규식  
  const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/i;
  const passwordRegEx = /^[A-Za-z0-9]{8,20}$/

  
  const emailCheck = (username) => {
    return emailRegEx.test(username); //형식에 맞을 경우, true 리턴
  }
  const passwordCheck = (password) => {
    if(password.match(passwordRegEx)===null) { //형식에 맞지 않을 경우 아래 콘솔 출력
      console.log('비밀번호 형식을 확인해주세요');
      return;
    }else{ // 맞을 경우 출력
      console.log('비밀번호 형식이 맞아요');
    }
  }
  const passwordDoubleCheck = (password, passwordChk) => {
    if(password !== passwordChk){
      console.log('비밀번호가 다릅니다.');
      return;
    }else{
      console.log('비밀번호가 동일합니다');
    }
  }
  
  <SingUpPage>
              <Text>반가워요! 이메일과 비밀번호를 <br />입력해주세요. 😀</Text>
              <Input 
              _onChange={(e)=>{setUsername(e.target.value); 
                              emailCheck(e.target.value)}} 
              placeholder="이메일(아이디)" name="signup_id" type="email"></Input>
              <Input 
              _onChange={(e)=>{setPassword(e.target.value); 
                              passwordCheck(e.target.value)}} 
              placeholder="비밀번호" type="password" name="signup_pwd"></Input>
              <Input 
              _onChange={(e)=>{setPasswordChk(e.target.value); 
                              passwordDoubleCheck(password, e.target.value)}} 
              placeholder="비밀번호 확인" type="password" name="signup_pwd_check"></Input>
              <Text >비밀번호는 영문 대소문자, 숫자를 혼합하여 8~20자로 입력해주세요</Text>
              <Button onClick={() => {showNextPage()}}>다음으로</Button>
     </SingUpPage>