[REACT] React Hook Form - 회원가입 폼 경고메시지 출력하기

ReactJS/개념정리

[REACT] React Hook Form - 회원가입 폼 경고메시지 출력하기

xowoony 2023. 4. 17. 15:56

학습일 : 2023. 04. 17

React Hook Form 을 이용하여 회원가입 폼에서 경고메시지를 출력해보자.

참고사항

1.input 태그 안 자바스크립트로 required 항목에 true를 적거나 메세지를 적을 수 있다.
2. minLength의 경우 가령 5라는 값을 적거나, 값과 메세지를 가지는 객체를 줄 수 있다.

3. 정규식(Regular Expression) 사용

(코드에다 작성해준 문자열이 어떤 종류인지, 어떻게 생겨야 하는지를 설정해 줄 수 있음)

정규식 검사 참고 사이트
https://regex101.com/

/^[A-Za-z0-9._%+-]+@naver\.com$/

위 정규식은
앞자리는 대소문자 A부터 Z까지 숫자와 부호들을 전부 포함
뒷자리는 naver.com과 일치하는 문자를 포함하겠다는 뜻이다.

이메일을 정규식으로 검사해보자

pattern을 작성해주고 정규식을 복사해서 넣어준다.

<input
      {...register("email", {
        required: true,
        pattern: {
          value: /^[A-Za-z0-9._%+-]+@naver\.com$/,
          message: "naver.com 주소만 허용됩니다.",
        },
      })}
      placeholder="email을 입력해주세요."
    />

pattern은 이런식으로 작성해주면 된다.
메세지를 띄우고 싶지 않다면

value: /^[A-Za-z0-9._%+-]+@naver\.com$/ 만 적어주면 된다.

이제 에러를 화면에 표시해보자
일단

  const { register, handleSubmit, formState:{errors} } = useForm(); 
  console.log(errors);

로 고치고

이메일 밑에 span태그를 만들어주고

에러를 표시해보면

<span>
    {errors?.email?.message as string}
</span>

조건에 맞지 않을 때 해당하는 메시지가 아래에 출력된다.

전체코드

<ToDoList.tsx>

import { useForm } from "react-hook-form";

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onValid = (data: any) => {
    console.log(data);
  };

  console.log(errors);
  return (
    <div>
      <form
        style={{
          display: "flex",
          flexDirection: "column",
        }}
        onSubmit={handleSubmit(onValid)}
      >
        <input
          {...register("email", {
            required: "이메일은 필수로 작성해주셔야 합니다.",
            pattern: {
              value: /^[A-Za-z0-9._%+-]+@naver\.com$/,
              message: "오직 naver.com 주소만 허용됩니다.",
            },
          })}
          placeholder="email을 입력해주세요."
        />
        <span>
        {errors?.email?.message as string}
        </span>
        <input
          {...register("firstname", { required: true })}
          placeholder="firstname을 입력해주세요."
        />
        <input
          {...register("lastname", { required: true })}
          placeholder="lastname을 입력해주세요."
        />
        <input
          {...register("username", { required: true, minLength: 3 })}
          placeholder="username을 입력해주세요."
        />
        <input
          {...register("password", { required: true, minLength: 10 })}
          placeholder="password을 입력해주세요."
        />
        <input
          {...register("password1", {
            required: true,
            minLength: { value: 5, message: "Your password is too short!" },
          })}
          placeholder="password1을 입력해주세요."
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default ToDoList;

경고 메시지를

다 적어주면 아래와 같다.

import { useForm } from "react-hook-form";

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onValid = (data: any) => {
    console.log(data);
  };

  console.log(errors);
  return (
    <div>
      <form
        style={{
          display: "flex",
          flexDirection: "column",
        }}
        onSubmit={handleSubmit(onValid)}
      >
        <input
          {...register("email", {
            required: "이메일은 필수로 작성해주셔야 합니다.",
            pattern: {
              value: /^[A-Za-z0-9._%+-]+@naver\.com$/,
              message: "오직 naver.com 주소만 허용됩니다.",
            },
          })}
          placeholder="email을 입력해주세요."
        />
        <span>{errors?.email?.message as string}</span>
        <input
          {...register("firstname", { required: "firstname을 입력해주세요." })}
          placeholder="firstname을 입력해주세요."
        />
        <span>{errors?.firstname?.message as string}</span>
        <input
          {...register("lastname", { required: "lastname을 입력해주세요." })}
          placeholder="lastname을 입력해주세요."
        />
        <span>{errors?.lastname?.message as string}</span>
        <input
          {...register("username", {
            required: "username을 입력해주세요.",
            minLength: 3,
          })}
          placeholder="username을 입력해주세요."
        />
        <span>{errors?.username?.message as string}</span>
        <input
          {...register("password", {
            required: "password를 입력해주세요",
            minLength: { value: 5, message: "5자 이상으로 설정해주세요" },
          })}
          placeholder="password를 입력해주세요."
        />
        <span>{errors?.password?.message as string}</span>
        <input
          {...register("password_check", {
            required: "password를 한번 더 입력해주세요",
            minLength: { value: 5, message: "5자 이상으로 설정해주세요" },
          })}
          placeholder="password를 입력해주세요."
        />
        <span>{errors?.password_check?.message as string}</span>
        <button>추가</button>
      </form>
    </div>
  );
}

export default ToDoList;

실행결과

이렇게

작성 form에 defaultValue도 줄 수 있다.

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IForm>({
    defaultValues: {
      email:"@naver.com"
    }
  });

import { useForm } from "react-hook-form";


interface IForm {
  email: string;
  firstname: string;
  lastname: string;
  username: string;
  password: string;
  password_check: string;
}

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IForm>({
    defaultValues: {
      email:"@naver.com"
    }
  });

  const onValid = (data: any) => {
    console.log(data);
  };

  console.log(errors);
  return (
    <div>
      <form
        style={{
          display: "flex",
          flexDirection: "column",
        }}
        onSubmit={handleSubmit(onValid)}
      >
        <input
          {...register("email", {
            required: "이메일은 필수로 작성해주셔야 합니다.",
            pattern: {
              value: /^[A-Za-z0-9._%+-]+@naver\.com$/,
              message: "오직 naver.com 주소만 허용됩니다.",
            },
          })}
          placeholder="email을 입력해주세요."
        />
        <span>{errors?.email?.message as string}</span>
        <input
          {...register("firstname", { required: "firstname을 입력해주세요." })}
          placeholder="firstname을 입력해주세요."
        />
        <span>{errors?.firstname?.message as string}</span>
        <input
          {...register("lastname", { required: "lastname을 입력해주세요." })}
          placeholder="lastname을 입력해주세요."
        />
        <span>{errors?.lastname?.message as string}</span>
        <input
          {...register("username", {
            required: "username을 입력해주세요.",
            minLength: 3,
          })}
          placeholder="username을 입력해주세요."
        />
        <span>{errors?.username?.message as string}</span>
        <input
          {...register("password", {
            required: "password를 입력해주세요",
            minLength: { value: 5, message: "5자 이상으로 설정해주세요" },
          })}
          placeholder="password를 입력해주세요."
        />
        <span>{errors?.password?.message as string}</span>
        <input
          {...register("password_check", {
            required: "password를 한번 더 입력해주세요",
            minLength: { value: 5, message: "5자 이상으로 설정해주세요" },
          })}
          placeholder="password를 입력해주세요."
        />
        <span>{errors?.password_check?.message as string}</span>
        <button>추가</button>
      </form>
    </div>
  );
}

export default ToDoList;

저작자표시 비영리 변경금지