Nuxt3でバリテーションの実装（日本語でエラー表示）
vee-validate, yupを使用して日本語でバリテーションエラーが表示される機能を実装します
今回はFieldというvee-validateのコンポーネントをデフォルトで使用する方法です
次回はFieldのコンポーネントそのままではなく、カスタマイズした実務寄りのやり方を記事にしたいと思います
完成イメージ
パッケージのドキュメント
パッケージのインストール
npm install vee-validate --save
npm install yup yup-locale-ja
npm install --save @types/lodash
パッケージの説明
| パッケージ名 | 説明 |
|---|---|
| vee-validate | バリテーションを簡単に実装できる |
| yup | vee-validateで使用するバリテーションのルールを簡単に実装できる |
| yup-locale-ja | yupのバリテーションメッセージを日本語化 |
| @types/lodash | カスタムバリテーションメッセージとyupのバリテーションメッセージを結合するのに使用 |
エラーメッセージの日本語化とカスタムバリテーションの追加
//plugins/vee-validate.client.ts
import _ from "lodash";
import { setLocale, type LocaleObject } from "yup";
import { suggestive } from "yup-locale-ja";
export default defineNuxtPlugin(() => {
const customeLocaleObject: LocaleObject = {
mixed: {
required: ({ label }) => (label ? label + "は" : "") + "必須項目です", //①
}
}
const LocaleObject = _.merge({}, suggestive, customeLocaleObject); //②
setLocale(LocaleObject); //③
})
①で既存のバリテーションメッセージを変更しています
既存のバリテーションメッセージは「
{項目名}には値を入力してください」なのでそのままで良い方は設定不要です
②では日本語のバリテーションメッセージとカスタムバリテーションメッセージの設定を統合しています
①を作成していない方は②も作成不要です
③ではバリテーションメッセージの設定を適用しています
①、②を作成していない方はsetLocale(suggestive); に差し替えてください
バリテーションの実装
//app.vue
<template>
<div>
<Form :validationSchema="validationSchema" v-slot="{ meta: { valid } }"> //①
<div>
<p>メールアドレス</p>
<Field name="email" v-model="email"/> //②
<ErrorMessage name="email"/> //③
</div>
<div>
<p>パスワード</p>
<Field name="password" v-model="password" type="password"/>
<ErrorMessage name="password"/>
</div>
<button :disabled="!valid">ログイン</button> //④
</Form>
</div>
</template>
<script setup lang="ts">
import { ErrorMessage, Field, Form } from 'vee-validate';
import * as yup from 'yup';
const email = ref(""); //⑤
const password = ref("");
const validationSchema = yup.object().shape({
email: yup.string().required().email().label("メールアドレス"), //⑥
password: yup.string().required().min(8).label("パスワード")
})
</script>
①フォームのvalidationSchemaにバリテーションルールを設定します
v-slotにはバリテーションの有無でボタンを非活性化できるようにvalidを設定します
②Fieldが入力フォームにあたるのでname属性とv-modelで入力した内容を反映させるリアクティブの変数を指定します
ここのname属性は⑥で設定しているバリテーションルールのキーと同じになるようにしてください
③バリテーションエラーが発生した際にバリテーションルールを表示します
name属性は②と⑥同じになるようにしてください
④Formのv-slotで設定したvalidがバリテーションルールがある時にfalseになるので、バリテーションルールがある時はボタンを非活性化してフォームの内容を送信できないようにしています
⑤②で入力した内容を格納するリアクティブな変数を作成します
⑥Formに設定するバリテーションエラーのルールを作成します
labelで指定している項目名はvee-validate.client.tsで設定したカスタムエラーのlabelの変数にはいる値となるため、バリテーションエラーが表示される際は何の項目のエラーなのか分かりやすく表示することができます
よく使用するバリテーションのルールは下記のサイトを参考にしてください
Discussion