[REACT] React Hook Form - validate 옵션 사용하기

학습일 : 2023. 04. 17

---

validate 옵션을 사용해보자
validate 옵션은
예를 들자면 우리 사이트에
"사울" 이라는 이름을 가진 사용자를 가입을 허용하지 않을 때 사용할 수 있다.
즉 내가 직접 만든 조건으로 검사할 수 있는 것이다.

---

validate는 함수를 값으로 가질 건데,
이 함수는 인자로 "항목에 현재 쓰여지고 있는 값" 을 받을 것이다.

이런 방식으로 작성해주면 된다.

이름에 사울을 포함할 때 사용할 수 없다는 메시지가 출력되고, 
이름에 사울이 없을 경우 true를 반환하도록 한다.

 <input
      {...register("firstname", {
        required: "firstname을 입력해주세요.",
        validate: (value) =>
          value.includes("사울")
            ? "사울이라는 이름은 사용할 수 없습니다."
            : true,
      })}
      placeholder="firstname을 입력해주세요."
    />

 

 

 

실행결과

 

---

validate 객체로 만들어 여러개의 조건 주기

 

validate는 객체로 만들어 줄 수 있다.
즉 여러 확인 절차가 필요할 경우엔

아래처럼

객체로 만들어 주면 된다.

사울과 닉을 둘다 아웃시키겠음.

<input
  {...register("firstname", {
    required: "firstname을 입력해주세요.",
    validate: {
      noSaul: (value) =>
        value.includes("사울")
          ? "사울이라는 이름은 사용할 수 없습니다."
          : true,
      noNick: (value) =>
        value.includes("닉")
          ? "닉이라는 이름은 사용할 수 없습니다."
          : true,
    },
  })}
  placeholder="firstname을 입력해주세요."
/>
 <span>{errors?.firstname?.message as string}</span>

 

 

 

 

 

직접 만든 조건으로 검사할 수 있다니

그것도 너무 간편하게!

 

 

---

최종 연습

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

interface IForm {
  toDo : string;
}

function ToDoList() {
  const { register, handleSubmit } = useForm<IForm>();

  const onSubmit = (data:IForm) => {
    console.log("add to do", data.toDo);
  };

  return (
    <div>
      {/* handleSubmit 함수를 사용할 때는
      첫번째 매개변수로 데이터가 유효할 때 호출되는 다른 함수를 받는다.
      두번째 매개변수로는 데이터가 유효하지 않을때 호출될 함수를 넣으면 된다.*/}
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("toDo", {
            required:"please write a to do"
          })}
          placeholder="오늘 해야할 일을 입력하세요"
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default ToDoList;