Vuetify — フォームとバリデーション

Lv1: 基本 — 必須チェック

問題

v-text-field に label="お名前" を設定し、未入力なら true を返さずに

「必須項目です」というエラーメッセージ（文字列）を返すルール関数を自作して :rules に渡せ。

未入力のままフィールドからフォーカスを外すと、そのエラーメッセージが表示されることを確認せよ。

合格基準

• 未入力時に「必須項目です」が表示される
• 何か入力すればエラーが消える

Lv2: 応用 — 複数ルールと v-form.validate()

問題

「お名前」（必須）と「メール」（必須 かつ メール形式）の2つの v-text-field を持つ v-form を作れ。

v-form に ref を張り、送信ボタン押下時に formRef.value.validate() を呼び出して、

その結果の valid をリアクティブな変数に保存すること。

以下の3パターンで送信し、それぞれの結果を確認せよ。

1. 両方未入力で送信
2. お名前だけ入力して送信
3. お名前・メール（不正な形式）を入力して送信
4. お名前・メール（正しい形式）を入力して送信

合格基準

• パターン1〜3では valid が false になる
• パターン4では valid が true になる

Lv3: 応用 — 複数フィールドの送信ガード

問題

「名前」（必須）・「メールアドレス」（必須 かつ メール形式）の2つの v-text-field を持つフォームを作り、

フォーム全体が valid になるまで送信ボタンを押せないようにせよ（disabled にする）。

• フォーム全体の valid 状態を、リアクティブな変数として追跡できるようにすること
• 送信ボタンの disabled 状態は、その valid 状態と連動させること

合格基準

• 名前・メールアドレスのどちらか一方でも未入力・不正な形式の間は、送信ボタンが押せない（disabled）
• 両方とも正しく入力されると、送信ボタンが押せるようになる

Lv4: 発展 — カスタムルールを自作する

問題

「8文字以上」を要求するパスワード用のルールを自作し、type="password" の v-text-field に追加せよ。

さらに、「必須」と「8文字以上」の両方を満たすルール配列にせよ。

TODO

<script setup>
// TODO: 「必須」ルールと「8文字以上」ルールをそれぞれ定義する
</script>

<template>
  <!-- TODO: :rules に上記2つのルールを配列で渡す -->
  <v-text-field label="パスワード" type="password" />
</template>

合格基準

• 7文字以下だとエラーになる
• 8文字以上だとエラーが消える
• rules は「値 → true or エラー文字列」という同じ形の関数を並べるだけで良いと説明できる

提出

submission.md に4問の回答を。

ヒント

まず第1段階だけ見て、自分で考えてみよう。行き詰まったら第2段階、それでも分からなければ第3段階を見る。

第1段階: 考え方

• v-form の中身をまとめて検証するには、テンプレート側のその v-form 要素に JS からアクセスできる仕組みが要る。
• バリデーションの実行は一瞬で終わるとは限らない処理として扱われている。実行が完了してから結果を使う必要がある。
• 検証結果は「フォーム全体として valid かどうか」を含むオブジェクトとして返ってくる。

第2段階: 使う API 名

• v-form に ref="formRef" を張っておくと、formRef.value から JS 側でフォームを操作できる。
• フォーム全体の検証は formRef.value.validate() を呼ぶ。これは Promise を返す非同期メソッドなので await する。
• 戻り値は { valid: boolean, errors: [...] } という形のオブジェクト。valid プロパティを取り出して使う。

第3段階: コード断片

async function submit() {
  const result = await formRef.value.validate()
  valid.value = result.valid
}

解説

v-form + rules で「入力チェック」を宣言的に書く

Vuetify のフォーム部品（v-text-field など）は rules という prop に「値を受け取って

true（OK）か文字列（エラーメッセージ）を返す関数の配列」を渡すだけで、入力チェックの仕組みが手に入る。

<script setup>
import { ref } from 'vue'

const formRef = ref(null)
const name = ref('')
const valid = ref(null)
const requiredRule = (v) => !!v || '必須項目です'

async function submit() {
  const result = await formRef.value.validate()
  valid.value = result.valid
}
</script>

<template>
  <v-form ref="formRef" @submit.prevent="submit">
    <v-text-field v-model="name" label="お名前" :rules="[requiredRule]" />
    <v-btn @click="submit">送信</v-btn>
  </v-form>
</template>

• requiredRule は「値があれば true、なければエラーメッセージの文字列」を返すだけの、ただの関数。

Vuetify 固有の書き方を覚える必要はなく、素の JS 関数を書けばよい。

• v-form に ref="formRef" を張ることで、formRef.value.validate() からフォーム内の

すべての rules を一括実行できる。個々の v-text-field を 1 つずつチェックして回る必要はない。

• validate() は非同期（Promise）。バリデーション結果が揃うまで待ってから

result.valid を読む必要があるため await を忘れると常に undefined になってしまう。

なぜ「1 個ずつ if 文でチェック」しないのか

素の JS でフォームバリデーションを書くと、入力欄が増えるたびに

if (!name.value) { ... } if (!email.value) { ... } のような分岐が積み上がり、

「どの欄が」「なぜ」エラーなのかの表示処理まで自分で書く必要が出てくる。

rules に判定関数を渡すだけで、エラー表示・色・アイコンまで Vuetify 側が面倒を見てくれるため、

入力欄が増えても書く量が線形にしか増えない。フォームの規模が大きくなるほど効果が大きい設計。

ヒント

まず第1段階だけ見て、自分で考えてみよう。行き詰まったら第2段階、それでも分からなければ第3段階を見る。

第1段階: 考え方

• メールアドレス欄のルールは、他のバリデーションルール（requiredRule など）と同じく

「値を受け取って true かエラーメッセージの文字列を返す関数」でしかない。

「〇〇@〇〇.〇〇」のような形をしているかどうかを、自分で判定する処理を書く必要がある。

• 各入力欄に rules を設定しても、それは「その欄が単独で OK かどうか」でしかない。

「フォーム全体として送信して良いか」は別に追跡する必要がある。

• ボタン側は、送信されて初めて検証結果を知るのではなく、入力の変化を追いかけて

リアルタイムに「押せる／押せない」を切り替えたい。

• つまり、フォーム全体の valid 状態を v-form 側とリアルタイムに同期させておき、

それをボタンの disabled 条件にそのまま流し込めばよい。

第2段階: 使う API 名

• v-form は ref を張って validate() を呼ぶ以外に、v-model で全体の valid 状態を

リアクティブに受け取ることもできる。<v-form v-model="valid"> のように書く。

• この valid は、まだ何も入力・検証されていない段階では null、検証済みなら

true / false になる。null も「valid ではない」として扱ってよい。

• v-btn の :disabled に !valid を渡せば、valid が true になるまでボタンは押せない。
• 各 v-text-field にはこれまでと同じく :rules="[...]" でルール関数の配列を渡す。

第3段階: コード断片

<script setup>
import { ref } from 'vue'

const valid = ref(null)
const requiredRule = (v) => !!v || '必須項目です'
const emailRule = (v) => !v || /.+@.+\..+/.test(v) || 'メール形式で入力してください'
</script>

<template>
  <v-form v-model="valid">
    <v-text-field label="名前" :rules="[requiredRule]" />
    <v-text-field label="メールアドレス" :rules="[requiredRule, emailRule]" />
    <v-btn :disabled="!valid">送信</v-btn>
  </v-form>
</template>

解説

v-form の v-model でフォーム全体の valid を追跡する

v-form は ref を張って formRef.value.validate() を呼ぶ（drill 01 のやり方）以外に、

v-model を使ってフォーム全体の valid 状態を常時受け取る方法もある。

<script setup>
import { ref } from 'vue'

const valid = ref(null)
const name = ref('')
const email = ref('')

const requiredRule = (v) => !!v || '必須項目です'
const emailRule = (v) => !v || /.+@.+\..+/.test(v) || 'メール形式で入力してください'
</script>

<template>
  <v-form v-model="valid">
    <v-text-field v-model="name" label="名前" :rules="[requiredRule]" />
    <v-text-field v-model="email" label="メールアドレス" :rules="[requiredRule, emailRule]" />
    <v-btn :disabled="!valid">送信</v-btn>
  </v-form>
</template>

• v-form に v-model="valid" を張ると、中の v-text-field の入力や rules の評価結果が変わるたびに、

Vuetify がフォーム全体の valid 状態を自動的に valid へ反映してくれる。個々の v-text-field の

結果を自分で集計して回る必要はない。

• valid の値は true / false だけでなく、まだどの項目も入力・検証されていない段階では null になる。

:disabled="!valid" と書けば、null の間も「valid ではない」として扱われ、ボタンは押せないままになる。

• 送信ボタンを押して初めて validate() の結果を確認する drill 01 の設計と違い、こちらは

入力中からリアルタイムに ボタンの押せる／押せないが切り替わる。

なぜ「送信して初めてエラーに気づく」より良いのか

validate() を送信時にだけ呼ぶ設計だと、ユーザーは一度ボタンを押すまで自分の入力が

正しいかどうかに気づけない。フォーム全体の valid 状態を v-model で常時追跡しておけば、

「入力が全部揃うまでボタンを押せなくする」というガードをそのまま UI に表現でき、

ユーザーが未入力・不正な入力のまま送信を試みて後からエラーに気づく、という体験を

未然に防げる。

入力欄が増えても、各欄には rules を渡すだけでよく、「フォーム全体の valid をどう集計するか」を

自分で書く必要がない点は drill 01 と同じ設計思想である。