• 티스토리 홈
  • 프로필사진
    홍유진
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
홍유진
  • 프로필사진
    홍유진
    • 분류 전체보기 (22)
      • Coding Test (0)
      • Web Frontend (19)
        • Problem Solving (0)
        • HTML_CSS (10)
      • Workflow (1)
      • Database (1)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • 회원가입 form 구현(1)_유효성 검사
        2024년 08월 03일
        • 홍유진
        • 작성자
        • 2024.08.03.:38

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

        그 과정을 살펴보자.

        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]);

         

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

        'Web Frontend' 카테고리의 다른 글

        Firebase를 이용하여 구글 로그인 구현  (0) 2024.08.04
        회원가입 form 구현(2)_버튼 활성화  (0) 2024.08.03
        Recoil 새로고침 랜더링 문제  (0) 2024.08.03
        react-Intersection-Observer 라이브러리를 이용해 무한스크롤 구현하기  (0) 2024.08.02
        ThemeProvider로 theme.ts에서 디자인 시스템 설정하기  (0) 2024.07.10
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바