0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#初めに
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 }

これは例なのですが、名前を入力するときに3つのバリデーションを設けました。
1名前を入力していないと「名前を入力して下さい」が出力される。
2名前が16文字以上だと「15文字以内で入力してください」が出力される。
3[^^"”`‘'’<><>__%$#&%$|¥]のいずれかが入力されていると「特殊文字を使用しないでください」が出力される。

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

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

の部分にエラーメッセージが出力される。
#おわりに
正規表現やコードが間違っている、などがありましたらお気軽にコメント等でお知らせ頂けると幸いです!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?