React表單其實可以很簡單，可以使用React Hook Form套件，接著我們就來看看怎麼使用他。

首先，要先知道useForm()這個React Hook Form的Hook，詳細說明請參考連結。

顯示必填

const { register, formState: { errors } } = ReactHookForm.useForm();

1. register

   對於input及select元素我們可以使用register去增加驗證，驗證屬性要放入register中。以下範例就是讓test input變成必填欄位且顯示required必填訊息。(其他驗證可以參考此連結)

   //方法一
   <input name="test" {...register("test", { required: true })} />
   //方法二
   <input name="test" {...register("test", { required: "required" })} />
   //方法三
   <input name="test" {...register("test", {required: { value: true, message: "required" }})}/>
   

2. formState: { errors }

   是由表單中整個form state資訊組成的物件，若有錯誤的欄位，就會進到errors裡面。可以搭配ErrorMessage一起使用(要先引入ErrorMessage)。

   <input {...register("singleErrorInput", { required: "This is required." })} />
   //方法一: 使用as產生<p> 
   <ErrorMessage errors={errors} name="singleErrorInput" as="p"/>
   //方法二: 用渲染的方式產生<p>
   <ErrorMessage
     errors={errors}
     name="singleErrorInput"
     render={({ message }) => <p>{message}</p>}
   />    
   

除了必填驗證還有…

• min: 可輸入的最小值

• max: 可輸入的最大值

• minLength: 字串長度最小值

• maxLength: 字串長度最大值

• pattern：使用正規表達式增加輸入限制

  <input
    {...register("test", {
      pattern: /[A-Za-z]{3}/
    })}
  />
  

• validate：加入 callback function 執行自訂的驗證函式

  <input
    {...register("test", {
      validate: value => value === '1'
    })}
  />
  // object of callback functions
  <input
    {...register("test1", {
      validate: {
        positive: v => parseInt(v) > 0,
        lessThanTen: v => parseInt(v) < 10,
        checkUrl: async () => await fetch(),
      }
    })}
  />