手動バリデーションのパターン
リアクティブなエラーオブジェクト、blur時とsubmit時の検証、パスワード確認の一致判定について学習します。
「手動バリデーションのパターン」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ライブラリを使わないバリデーション
単純なフォームであれば、リアクティブな状態を使って手動でバリデーションできます。エラーを追跡し、送信時またはフォーカスが外れたときにチェックを実行し、ディレクティブでメッセージを表示します。これは、すべてのライブラリの基盤となる基本を学ぶのに役立ちます。
errorsオブジェクト
フィールド名をキーとするリアクティブなerrorsオブジェクトを保持します。空文字列（またはキーが存在しない状態）は、エラーがないことを意味します。
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>validate関数
各フィールドをチェックし、errorsオブジェクトにメッセージを設定するvalidate関数を作成します。フォームが有効かどうかを返します。
<script setup>
function validate() {
errors.name = form.name ? '' : 'Name is required'
errors.email = form.email.includes('@') ? '' : 'Invalid email'
return !errors.name && !errors.email
}
</script>送信時にバリデーションする
送信ハンドラーの最初にvalidateを呼び出し、失敗したら処理を中断します。これにより、無効なデータが送信されるのを確実に防げます。
<script setup>
function onSubmit() {
if (!validate()) return
// proceed to send
}
</script>フォーカスが外れたときにフィールドごとにバリデーションする
送信時だけバリデーションすると、反応が遅く感じられることがあります。ユーザーがフィールドから移動したときに@blurを使ってそのフィールドを検証すると、すぐにフィードバックを返せます。
<script setup>
function validateName() {
errors.name = form.name ? '' : 'Name is required'
}
</script>
<template>
<input v-model="form.name" @blur="validateName" />
</template>エラーメッセージを表示する
v-ifを使い、そのフィールドにエラーがある場合だけメッセージを表示します。メッセージは入力欄の近くに配置します。
<template>
<input v-model="form.name" @blur="validateName" />
<span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>無効なフィールドをスタイル設定する
オブジェクト構文でクラスをバインドし、エラーがあるときに赤い枠線を追加します。このクラスは、errors.nameがtruthyの間だけ適用されます。
<input
v-model="form.name"
:class="{ error: errors.name }"
@blur="validateName"
/>errorスタイル
小さなCSSルールを追加すれば見た目が整います。赤い枠線によって、そのフィールドに対応が必要であることを示せます。
<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>computedによる有効性
computedでフォーム全体の有効性フラグを導出し、送信ボタンをリアクティブに有効化または無効化します。
<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>
<template>
<button :disabled="!isValid">Submit</button>
</template>長所と限界
手動バリデーションは仕組みが明快で依存関係もなく、小規模なフォームに適しています。しかし、フィールド間のチェック、非同期バリデーション、多数のフィールドなど、ルールが増えると定型コードも増えていきます。これがライブラリが存在する理由です。
バリデーションフローのまとめ
パターンは次のとおりです。リアクティブなerrors、validate関数、送信時（必要に応じてblur時にも）の実行、v-ifによるメッセージ表示、条件付きクラスによるスタイル設定です。
確認テスト
手動バリデーションに関する知識をテストします。
振り返り
手動バリデーションのパターン：
- フィールドをキーとするリアクティブな
errorsオブジェクトを保持します。 validate関数でメッセージを設定し、有効性を返します。- 送信時にバリデーションし、
@blurでフィールドごとにも検証して素早くフィードバックします。 v-if="errors.x"でメッセージを表示し、:class="{ error: errors.x }"でスタイルを設定します。
よくある質問
「手動バリデーションのパターン」レッスンは無料ですか？
はい。「手動バリデーションのパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「手動バリデーションのパターン」で何を学びますか？
リアクティブなエラーオブジェクト、blur時とsubmit時の検証、パスワード確認の一致判定について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「手動バリデーションのパターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。