7/25 정규표현식을 사용한 form 유효성 검사(Next.js), errorMessage를 반환하는 커스텀훅 사용하기

정규식 표현을 사용한 form validation check

• 이름, 이메일, 비밀번호에 대한 유효성 검사 로직을 정규표현식을 사용하여 구현.
• 각 입력 필드에 대한 정규표현식을 정의하고, 입력 값이 해당 정규표현식과 일치하는지 검사하여 유효성 검사 메시지를 설정.

이름 정규표현식

: 소문자, 대문자, 숫자로만 이루어진 1자에서 10자까지의 문자열을 검증

const regex = /^[a-zA-Z0-9]{1,10}$/;

• [a-zA-Z0-9]: 소문자(a-z), 대문자(A-Z), 숫자(0-9) 중 하나의 문자와 일치
• {1,10}: 1자에서 10자까지의 길이와 일치
• $: 문자열의 끝

이메일 정규표현식

: 유효한 이메일 주소 형식을 검증하는 정규표현식

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

• ^: 문자열의 시작
• [^\s@]: 공백이나 '@' 문자를 제외한 모든 문자와 일치
• +: 1회 이상 반복됨
• @: '@' 문자가 반드시 포함됨
• [^\s@]+: 공백이나 '@' 문자를 제외한 모든 문자가 1회 이상 반복
• .: '.' 문자가 반드시 포함됨
• [^\s@]+$: 공백이나 '@' 문자를 제외한 모든 문자가 1회 이상 반복됨 + 문자열의 끝

비밀번호 정규표현식

: 숫자와 특수문자를 포함한 최소 8자 이상의 문자열을 검증

const regex = /^(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{8,}$/;

• ^: 문자열의 시작
• (?=.*\d): 최소한 하나의 숫자(0-9)가 포함되어야 함
• (?=.[!@#$%^&]): 최소한 하나의 특수문자(!@#$%^&*)가 포함되어야 함
• [a-zA-Z\d!@#$%^&*]: 소문자(a-z), 대문자(A-Z), 숫자(0-9), 특수문자- (!@#$%^&*) 중 하나의 문자와 일치
• {8,}: 최소 8자 이상이어야 함
• $: 문자열의 끝

const validation = {
  name: (text: string) => {
    const regex = /^[a-zA-Z0-9]{1,10}$/;
    if (text === "") return "이름을 입력해주세요.";

    if (text.length < 2) return "이름은 2글자 이상이어야 합니다.";

    if (text.length > 10) return "이름은 최대 10자까지 입력 할 수 있습니다.";

    if (!regex.test(text))
      return "이름에는 특수문자나 공백이 포함될 수 없습니다.";
    return;
  },
  email: (text: string) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (text === "") return "이메일을 입력해주세요.";

    if (!regex.test(text)) return "유효한 이메일 주소를 입력하세요.";
    return;
  },
  password: (pass: string, confirmPass: string) => {
    const regex = /^(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{8,}$/;
    if (pass === "") return "비밀번호를 입력해주세요.";

    if (!regex.test(pass))
      return "비밀번호는 숫자와 특수문자를 포함해야 하며, 최소 8자 이상이어야 합니다.";
    if (confirmPass !== undefined && pass !== confirmPass)
      return "비밀번호가 일치하지 않습니다.";
    return;
  },

커스텀훅 생성

validate 함수를 사용하여 입력 필드 별 에러 메시지를 반환하는 커스텀 훅을 생성함.
입력 필드의 값이 변경될 때마다 유효성 검사를 수행하고, 그 결과를 상태로 관리하여 반환함.

import { validate } from "@/utils/validate";
import { useEffect, useState } from "react";

type Props = {
  name: string;
  email: string;
  password: string;
  confirmPassword: string;
};

export function useErrorMessage({
  name,
  email,
  password,
  confirmPassword,
}: Props) {
  const [nameError, setNameError] = useState<string | null>(null);
  const [emailError, setEmailError] = useState<string | null>(null);
  const [passwordError, setPasswordError] = useState<string | null>(null);
  const [confirmPasswordError, setConfirmPasswordError] = useState<
    string | null
  >(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      setNameError(name ? validate.name(name) : null);
      setEmailError(email ? validate.email(email) : null);
      setPasswordError(password ? validate.password(password) : null);
      setConfirmPasswordError(
        confirmPassword
          ? validate.confirmPassword(password, confirmPassword)
          : null
      );
    }, 500);

    return () => clearTimeout(timer);
  }, [name, email, password, confirmPassword]);

  return {
    nameError,
    emailError,
    passwordError,
    confirmPasswordError,
    setEmailError,
  };
}