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