React Hook Form は Reack のバリデーションライブラリの一つです。 Hook の名が示す通り関数コンポーネントの Hook 機能を使ってバリデーション用のモジュールを提供してくれます。
ホーム ｜ React Hook Form – Simple React forms validation
yup はバリデーションルールを定義するためのライブラリです。メソッドチェーン的にルールを決定できます。
React Hook Form と yup を組み合わせることでフォームのバリデーション定義を分かりやすく作れます。デモは次です。
はじめる ｜ React Hook Form – Simple React forms validation#スキーマバリデーション
これは次の記述で実現されています。
import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers';
import * as yup from "yup";
// yup によるバリデーションルール定義
// schema の名らしく一構造体にまとめて記述できる
const schema = yup.object().shape({
firstName: yup.string().required(),
age: yup.number().positive().integer().required(),
});
export default function App() {
// バリデーション機能を呼び出し
// yupResolver(schema) で上述の yup ルールを採用
const { register, handleSubmit, errors } = useForm({
resolver: yupResolver(schema)
});
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* ref={register} でバリデーション機能に登録されます */}
<input type="text" name="firstName" ref={register} />
{/* errors はバリデーションエラー内容を持つ構造体で自動で更新されます */}
<p>{errors.firstName?.message}</p>
<input type="text" name="age" ref={register} />
<p>{errors.age?.message}</p>
<input type="submit" />
</form>
);
}
シンプルで読みやすく書きやすいです。例だけでもバリデーションとしては十分ですが日本語に対応できていません。日本語に対応したデモが次です。
これは次の様なコードで実現しています。
/*** LocaleJP.js ***/
// 日本語のルールと文言の対応を定義
export const LocaleJP = {
mixed: {
default: '${path}は無効です',
required: '${path}は必須フィールドです',
oneOf: '${path}は次の値のいずれかでなければなりません:${values}',
notOneOf: '${path}は次の値のいずれかであってはなりません:${values}',
},
string: {
length: '${path}は正確に${length}文字でなければなりません',
min: '${path}は少なくとも${min}文字でなければなりません',
max: '${path}は最大${max}文字でなければなりません',
matches: '${path}は次と一致する必要があります: "${regex}"',
email: '${path}はメールアドレス形式である必要があります',
url: '${path}は有効なURLでなければなりません',
trim: '${path}はトリミングされた文字列でなければなりません',
lowercase: '${path}は小文字の文字列でなければなりません',
uppercase: '${path}は大文字の文字列でなければなりません',
},
number: {
min: '${path}は${min}以上である必要があります',
max: '${path}は${max}以下でなければなりません',
lessThan: '${path}は${less}より小さくなければなりません',
moreThan: '${path}は${more}より大きくなければなりません',
notEqual: '${path}は${notEqual}と等しくない必要があります',
positive: '${path}は正の数でなければなりません',
negative: '${path}は負の数でなければなりません',
integer: '${path}は整数でなければなりません',
},
date: {
min: '${path}フィールドは${min}より後でなければなりません',
max: '${path}フィールドは${max}より前でなければなりません',
},
object: {
noUnknown: '${path}フィールドには,オブジェクトシェイプで指定されていないキーを含めることはできません',
},
array: {
min: '${path}フィールドには少なくとも${min}の項目が必要です',
max: '${path}フィールドには${max}以下の項目が必要です',
},
};
/*** BaseYup.js ***/
import { LocaleJP } from '@/validation/LocaleJP';
import * as yup from 'yup';
// yup に作った日本語メッセージを定義
yup.setLocale(LocaleJP);
// yup は import する度に setLocale する必要があるので setLocale 済みの yup を呼び出せるように export
export const BaseYup = yup;
/*** form.jsx ***/
// 上述の BaseYup を仕様
import { BaseYup } from "./BaseYup";
// スキーマの末尾に label と付けてフィールドごとの自然言語名を定義
const SignupSchema = BaseYup.object().shape({
firstName: BaseYup.string().required().label("名"),
lastName: BaseYup.string().label("姓"),
age: BaseYup.number().required().positive().integer().label("年齢"),
website: BaseYup.string().url().label("WebサイトURL")
});
例では基本ルールのみでしたが yup は任意の関数とメッセージによるカスタムルールにも対応しています。こんな感じで React Hook Form と yup によってあっという間にバリデーション用のロジックを作れます。ロジックを作ったならばあとはデザインフレームワークなり手製のCSSなりのエラー表記と繋げるだけでバリデーション機能完成です。
