react5 validation

はじめに

フロントでバリデーションを行いたい。
reactを使っている。

検証要件

名前を１０文字以内
メールアドレスは適切な形式
パスワードは６文字以上
そして上の三つは必須項目。
適当にこんな感じ。

以上の要件に合わない場合はapiを叩かないようにしたい。
react-hook-formというライブラリを使う記事が多かったので参考にした。
しかし、皆typescriptで書いてて理解しづらい、、、
そこで公式を軽く読んで使い方を理解。
https://react-hook-form.com/get-started

やりたいことはさっきの要件の検証とエラー文の出力。
エラー文のレンダリングには@hookform/error-messageライブラリを使用したらOK。
https://www.npmjs.com/package/@hookform/error-message

実践

import { useForm } from "react-hook-form";
import { ErrorMessage } from '@hookform/error-message';
const UserCreate = () => {
    const URL = "http://localhost:8080/post"
    const { register, handleSubmit , formState: { errors }} = useForm();
    const postData = (data) => {
        fetch(URL,
        {
        method: 'POST',
        headers:{'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }
        )
            .then(() => {
            console.log("success")
            })
            .catch((error) => {
            console.error(error)
            })
        
    }
    return (
        <div>
            <form onSubmit={handleSubmit(postData)}>
                <div>
                    <label>
                        名前:
                        <input
                            {...register("username", {
                                required: "入力必須",
                                maxLength: {
                                    value: 10,
                                    message:"10文字以内"   
                                }
                            })} />
                    </label>
                    <div>
                        <ErrorMessage name="username" errors={errors}/>
                    </div>
                </div>
                <div>
                    <label>
                        メール:
                        <input
                            {...register("email", {
                                required: "入力必須",
                                pattern: {
                                    value: /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/,
                                    message:"入力形式が適切ではありません。"
                                }
                            })} />
                    </label>
                    <div>
                        <ErrorMessage name="email" errors={errors}/>
                    </div>
                </div>
                <div>
                    <label>
                        パスワード:
                        <input
                            {...register("password", {
                                required: "入力必須",
                                minLength: {
                                    value: 6,
                                    message:"6文字以上"
                                }
                            })} />
                    </label>
                    <div>
                        <ErrorMessage name="password" errors={errors} />
                    </div>
                </div>
                <input type="submit" value="送信" />
            </form>
        </div>
    )
}
export default UserCreate

参考↓
https://qiita.com/NozomuTsuruta/items/60d15d97eeef71993f06

解説

基本的にはそこまで使い方に癖は感じなかった。
要はformタグにonSubmitを仕込むのは同じ。
inputタグにonChangeを仕込む手間が減った。
さらにstateを定義する必要がなくなった。
これはregister,handleSubmitのおかげ！
handleSubmitでformのデータをラップした関数(postData)に渡してくれる。これでonChangeで変更した内容をuseStateの更新関数でstateの値を変更せずに済む。
registerはformの値を管理。
構文としては

<input {...register("state名", {検証したい内容})} />

こんな感じなのかな。
具体的に検証して蹴られた場合のエラー文は
requiredはブール値で必須か否かを表す。デフォではfalseなのでtrueとしたら必須項目となる。
さらにtrueの代わりに表示したいエラーメッセージを書くことで必須項目かつエラーメッセージを設定できる。
その他に、文字数制限はminLengthとか色々とあるので公式をチェック。
メールアドレスの場合は正規表現で形式があっているか検証している。
その際のエラーメッセージはvalueとして設定している。

それに対をなすように検証からはじかれた場合のエラー文を表示させるのが

<ErrorMessage name="state名" errors={errors}/>

以前の記事