Vue Academy · レッスン

スキーマベースのバリデーションにVeeValidateを使う

useForm()、useField()、yupスキーマ、エラーメッセージ、非同期バリデーションの処理について学習します。

「スキーマベースのバリデーションにVeeValidateを使う」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

VeeValidateで拡張する

フォームが大きくなると、手作業でバリデーションを書くのは面倒になります。VeeValidateは、フォームの状態を管理し、スキーマに基づいてバリデーションを実行し、エラーをすべてリアクティブに提供する、Vueで人気のライブラリです。

スキーマベースのバリデーション

チェックを手作業で記述する代わりに、スキーマでルールを宣言的に記述します。VeeValidateとyupを組み合わせると、そのスキーマを流暢に構築できます。

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

useFormでフォームを設定する

useFormはフォーム単位の状態とバリデーションを初期化します。スキーマをvalidationSchemaとして渡すと、すべてが連携されます。

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

useFieldでフィールドを接続する

useFieldは、名前を指定して1つの入力欄を登録します。フィールドのvalue、errorMessage、handleBlurハンドラーを返します。

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

テンプレートでフィールドをバインドする

返されたvalueをv-modelでバインドし、@blurをhandleBlurに接続して、フォーカスが外れたときのバリデーションを有効にします。

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

エラーメッセージを表示する

各フィールドは独自のerrorMessageを公開します。これはリアクティブな文字列で、有効な場合は空になり、無効な場合はスキーマで定義したメッセージが入ります。

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

送信を処理する

handleSubmitは送信関数をラップします。まずバリデーションを実行し、フォーム全体が有効な場合にのみ、値を渡してコールバックを呼び出します。

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

フォームレベルのエラー

useFormから取得するerrorsオブジェクトは、フィールド名と現在のメッセージを対応付けます。エラーの概要や条件付きUIに便利です。

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

ライブラリを使う理由

宣言的なスキーマにより、繰り返しの多い手動チェックが不要になります。
blur、change、submitのタイミングで行うバリデーションが組み込まれています。
フィールドごとのerrorMessageとフォームレベルのerrorsを利用できます。
yupを通じて、非同期ルールやフィールド間のルールを簡単に定義できます。

コンポーネントとComposition API

VeeValidateには、テンプレート中心のスタイルに適した<Form>と<Field>コンポーネントも用意されています。Composition APIのuseFormとuseFieldは<script setup>との相性がよく、より細かく制御できます。

手動とスキーマベース

手動バリデーションは仕組みを学ぶのに適しており、小さなフォームに向いています。VeeValidateとyupによるスキーマベースのバリデーションは、はるかに少ないコードと少ないバグで、大規模で複雑なフォームにも対応できます。

確認テスト

VeeValidateに関する知識をテストします。

振り返り

VeeValidateによるスキーマベースのバリデーション：

validationSchemaとして渡すyupスキーマにルールを記述します。
useFormがフォームの状態、errors、handleSubmitを管理します。
useFieldは各入力欄に対してvalue、errorMessage、handleBlurを返します。
大規模なフォームでは、手動バリデーションよりはるかに優れた拡張性を発揮します。

よくある質問

「スキーマベースのバリデーションにVeeValidateを使う」レッスンは無料ですか？

はい。「スキーマベースのバリデーションにVeeValidateを使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「スキーマベースのバリデーションにVeeValidateを使う」で何を学びますか？

useForm()、useField()、yupスキーマ、エラーメッセージ、非同期バリデーションの処理について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「スキーマベースのバリデーションにVeeValidateを使う」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る