로그인/ 회원가입 정규식

김태욱·2023년 2월 18일
0

React

목록 보기
14/14

로그인/회원가입 정규식 표현

-정규식이란 ?
회원가입 폼에서 사용되는 정규식은 입력한 정보가 특정한 형식에 맞는지를 검사하는 패턴이다. 이를 통해 회원가입 시 입력되는 정보의 유효성을 검사하고, 잘못된 입력을 방지할 수 있다.

//현재 이메일 확인
  const handleEmail = (e) => {
    const nowId = e.target.value;
    const idRegex =
      /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!idRegex.test(nowId)) {
      setEmErroMsg("*이메일 형식에 맞춰서 작성해주세요.");
    } else {
      setImErroMsg("");
    }
  };

현재 유저가 타이핑 할 때 실시간을 정규식에 맞는지 안맞는지 코드를 작성하였다 .
input 에 onChange 이벤트를 이용하여 현재 유저의 value를 e.target.value로 가져와 검사해주었다

idRegex 정규식을 정의하여 test () 메서드를 이용하여 검사하여 정규식이 맞지 않을 때는 setImmErroMsg state 함수에 저장하여 에러메세지를 띄우게 하였다 !

패스워드도 같은 방식으로 작성하였다!

 //현재 패스워드 확인
  const handlePw = (e) => {
    const nowPw = e.target.value;
    const pwRegex = /^[A-Za-z0-9]{8,20}$/;
    if (!pwRegex.test(nowPw)) {
      setPwErroMsg(
        "*비밀번호는 영문 대소문자, 숫자를 혼합하여 8~20자로 입력해주세요"
      );
    } else {
      setPwErroMsg("");
    }
  };

결과물 -

profile
넘어보자

0개의 댓글