회원가입 form 구현(1)_유효성 검사

유효성 검사를 구현하면 사용자가 올바른 데이터를 입력하도록 유도하고, 잘못된 데이터가 서버에 전달되는 것을 방지할 수 있다. 그래서 이번 프로젝트에서 회원가입 페이지를 구현하면서 유효성 검사 기능을 구현하였다.

그 과정을 살펴보자.

1. 상태 초기화 및 핸들러 설정

먼저, useState를 사용하여 폼 데이터와 에러 메세지를 관리한다. 또한 handleChange 함수를 통해 입력값이 변경될 때마다 호출되어 상태를 업데이트하고 유효성 검사를 수행한다.

// 입력된 값을 저장
const [value, setValue] = useState<FormValues>({
  email: "",
  password: "",
  nickname: "",
});
// 유효성 검사 결과를 저장
const [errors, setErrors] = useState<FormValues>({
  email: "",
  password: "",
  nickname: "",
});

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;

  setValue(prev => ({
    ...prev,
    [name]: value,
  }));
  validateField(name, value);
};

2. 유효성 검사 함수

validateField 함수는 각 입력 필드에 대한 특정한 유효성 검사 규칙을 적용한다.

이메일 형식, 비밀번호 길이 및 조합, 닉네임 길이를 확인한다.

const validateField = (name: string, value: string) => {
  let errorMessage = "";

  switch (name) {
    case "email":
      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i.test(value)) {
        errorMessage = "유효한 이메일 주소를 입력해주세요.";
      }
      break;
    case "password":
      if (value.length < 6) {
        errorMessage = "비밀번호는 최소 6자 이상 입력하세요.";
      } else if (!/(?=.*[a-zA-Z])(?=.*\\d)/.test(value)) {
        errorMessage = "알파벳, 숫자를 조합한 비밀번호를 입력하세요.";
      }
      break;
    case "nickname":
      if (value.trim().length === 0) {
        errorMessage = "닉네임은 최소 1자 이상 입력하세요.";
      }
      break;
    default:
      break;
  }

  setErrors(prev => ({
    ...prev,
    [name]: errorMessage,
  }));
};

3. 유효성 검사 결과에 따른 폼 상태 업데이트

useEffect를 사용하여 입력값과 에러메세지의 상태 변화를 감지하고, 모든 입력 필드가 유효한 경우에만 폼을 제출할 수 있도록 버튼을 활성화한다.

useEffect(() => {
  const isFormValid =
    Object.values(value).some(filed => filed.trim() !== "") && // 모든 입력 필드가 비어 있지 않은지 확인
    Object.values(errors).every(error => error === ""); // 모든 에러 메시지가 빈 문자열인지 확인

  setIsDisabled(!isFormValid); // 두 조건이 모두 만족되면 isFormValid는 true가 되고, setIsDisabled는 false로 버튼을 활성화
}, [value, errors]);

 

다음 포스트에서는 버튼 활성화에 관한 내용을 볼 수 있습니다.