글쓰는쿼카의 PM 여정

(2024. 6. 19.) 로그인, 회원가입 유효성 검사 기능 구현 본문

개발/React

(2024. 6. 19.) 로그인, 회원가입 유효성 검사 기능 구현

글쓰는쿼카 joymet33 2024. 6. 19. 23:14

로그인, 회원가입 조건

1. ID

- 빈칸 x

- 이메일 형식 O

 

2. PassWord

- 빈칸 x

- 6글자 이상 O

- 영어, 숫자, 특수문자 3가지 모두 포함 (보류)

 

3. Recheck PassWord - 회원가입만 해당

- 빈칸 x

- 2번 PassWord와 일치

 

4. Nickname - 회원가입만 해당

- 빈칸 x

- 3글자 이상 O

 

  const validateEmail = (email) => {
    const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
    return regex.test(email);
  };

  const handleSignUp = async (e) => {
    if (!email) {
      alert("이메일 주소를 입력해주세요.");
      return;
    }
    if (!validateEmail(email)) {
      alert("이메일 형식으로 이메일 주소를 입력해주세요.");
      setEmail("");
      return;
    }
    if (!password) {
      alert("비밀번호를 입력해주세요.");
      return;
    }
    if (password.length < 6) {
      alert("비밀번호는 6글자 이상이어야 합니다.");
      setPassword("");
      return;
    }
    if (!recheckPassword) {
      alert("비밀번호를 확인해주세요.");
      return;
    }
    if (password !== recheckPassword) {
      alert("비밀번호와 일치하지 않습니다.");
      setRecheckPassword("");
      return;
    }
    if (!nickname) {
      alert("닉네임을 입력해주세요.");
      return;
    }
    if (nickname.length < 3) {
      alert("닉네임은 3글자 이상이어야 합니다.");
      setNickname("");
      return;
    }