Vuetifyのフォーム・入力チェック・API送信｜v-formとrulesの基本

※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。

Vuetify を導入できたら、次は実用の山場である入力フォームです。ただ入力欄を置くだけでなく、「必須なのに空」「文字数オーバー」を弾き、送信中はボタンを押せなくし、サーバーが返したエラーも表示する——ここまでできて初めて業務アプリのフォームになります。この記事で一通り組み立てます。

※ 学習用に調べた内容を個人的にまとめたものです。文章は AI の補助を受けて作成しています。

v-form ＋ v-text-field ＋ rules
送信前にまとめて検証する
テンプレート：送信中の制御とエラー表示
画面はロジックを持たせすぎない
もっと体系的に学ぶなら（書籍）
次に読む

v-form ＋ v-text-field ＋ rules

Vuetify では入力欄 v-text-field に rules（検証ルールの配列）を渡します。各ルールは「OKなら true、NGならエラーメッセージ文字列を返す関数」です。

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('')

const rules = {
  required: (v: string) => !!v || '必須項目です',
  max: (v: string) => v.length <= 20 || '20文字以内で入力してください',
}
</script>

<template>
  <v-text-field
    v-model="title"
    label="タスク名"
    :rules="[rules.required, rules.max]"
  />
</template>

v-model="title" で入力値と状態が双方向につながり、ルールに反すると入力欄の下にメッセージが自動表示されます。

送信前にまとめて検証する

フォーム全体を v-form で囲み、参照（ref）を取っておくと、送信時に validate() でまとめて検証できます。

<script setup lang="ts">
import { ref } from 'vue'
import { useTasks } from '../composables/useTasks'

const form = ref()          // v-form への参照
const title = ref('')
const rules = {             // 検証ルール（前セクションと同じ）
  required: (v: string) => !!v || '必須項目です',
  max: (v: string) => v.length <= 20 || '20文字以内で入力してください',
}
const submitting = ref(false)
const serverError = ref<string | null>(null)
const { add } = useTasks()

async function onSubmit() {
  const { valid } = await form.value.validate()
  if (!valid) return        // 入力チェックNGなら送信しない

  submitting.value = true
  serverError.value = null
  try {
    await add(title.value)  // composable経由でAPI送信
    title.value = ''
  } catch (e) {
    serverError.value = '登録に失敗しました。時間をおいて再度お試しください。'
  } finally {
    submitting.value = false
  }
}
</script>

テンプレート：送信中の制御とエラー表示

<template>
  <v-form ref="form" @submit.prevent="onSubmit">
    <v-text-field
      v-model="title"
      label="タスク名"
      :rules="[rules.required, rules.max]"
    />

    <v-alert v-if="serverError" type="error" class="mb-4">
      {{ serverError }}
    </v-alert>

    <v-btn type="submit" color="primary" :loading="submitting">
      登録する
    </v-btn>
  </v-form>
</template>

@submit.prevent … 送信時のページ再読み込みを止める
:loading="submitting" … 送信中はボタンをローディング表示＆二重送信を防ぐ
v-alert … サーバーが返したエラーを画面に表示

画面はロジックを持たせすぎない

ポイントは、「入力チェックと表示」は画面、「API 送信」は composable / repository に任せること。onSubmit の中も、実際の通信は add()（composable）に委ねています。こうしておくと、UI（Vuetify）を差し替えても送信ロジックはそのまま使えます。クライアント側の rules に加えて、サーバー側が返すバリデーションエラーも v-alert やフィールドに反映すると、より堅牢になります。

これで「入力 → 検証 → 送信 → 結果表示」というフォームの一連が組めました。ここまでの部品を1つのアプリにまとめるのが、次の完成編です。