React Hook Form의 Register Option의validate로 메시지 지정 방법

결론

react-hook-form v7.*

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

const requierdWord = 'ねこ';

export default function Page() {
  const { register, formState: { errors } } = useForm<{text: string}>({
    defaultValues: { text: ''},
  });
  
  return (
    <div>
      <input
        type="text"
        {...register("text", {
	  validate: {
	    message: v => v.includes(requierdWord)
	      ? null
	      : `「${requierdWord}」を含んだ文字列を入力してください`
	  }
	})}
       />
       {errors &&
         <p className="error-message">{errors.text?.message}</p>
       }
    </div>
  )
}

해설

다음 공식 문서의 Rules의validate에서 대상과 함수를 받아들일 수 있음을 알 수 있습니다validate: Function | Objecthttps://react-hook-form.com/api/useform/register

object에 메시지 전달 함수

null 반환 후 오류 없음
문자열을 반환하면 오류가 발생합니다.
에 저장됩니다.

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

const requierdWord = 'ねこ';

export default function Page() {
  const { register, formState: { errors } } = useForm<{text: string}>({
    defaultValues: { text: ''},
  });
  
  const textValidateOption = {
    validate: {
      message: v => v.includes(requierdWord)
        ? null
	: `「${requierdWord}」を含んだ文字列を入力してください`
      }
  }
  
  return (
    <div>
      <input
        type="text"
        {...register("text", textValidateOption)}
       />
       {errors &&
         <p className="error-message">{errors.text?.message}</p>
       }
    </div>
  )
}