react-hook-formでバリデーションする

初めに

react-hook-formでユーザー登録のページを作ろうと思った時に、
SQLインジェクションなどのセキリュティの面でバリデーションを設けたいと思い、
react-hook-formに出会い、簡単に実装ができたので学習のためにoutputします。

実装例

sighup

<Input
  {...register("Name", {
    required: true,
    minLength: {
      value: 0,
      message: '名前を入力してください'
    },
    maxLength: {
      value: 15,
      message: '15文字以内で入力してください'
    },
    pattern: {
      value: /^[^^＾"”`‘'’<>＜＞_＿%$#＆％＄|￥]+$/,
      message: '特殊文字を使用しないでください'
    }
  })}
/>
{ errors.Name && errors.Name.message }

これは例なのですが、名前を入力するときに３つのバリデーションを設けました。
１名前を入力していないと「名前を入力して下さい」が出力される。
２名前が16文字以上だと「15文字以内で入力してください」が出力される。
３[^＾"”`‘'’<>＜＞_＿%$#＆％＄|￥]のいずれかが入力されていると「特殊文字を使用しないでください」が出力される。

それぞれminLengthやmaxLengthのvalueに違反すると、下の

sighup

{ errors.Name && errors.Name.message }

の部分にエラーメッセージが出力される。

おわりに

正規表現やコードが間違っている、などがありましたらお気軽にコメント等でお知らせ頂けると幸いです！