Vue.jsでフォームを実装する際、入力内容のバリデーションは非常に重要です。ユーザー入力を正しく受け取り、不正な値を未然に防ぐことで、信頼性の高いアプリケーションを実現できます。vee-validateは、Vue向けの強力なバリデーションライブラリで、シンプルな構文と柔軟なルール定義が特徴です。本記事では、vee-validateの導入方法から基本的な使い方、実践的なバリデーションルールまで解説します。
vee-validateのインストール
まずはnpmでライブラリをインストールします。
npm install vee-validate yupここでは併用されることの多いスキーマ定義ライブラリ「yup」も同時にインストールします。
基本的な使い方（Composition API）
以下は、useForm・useFieldを使った基本構成の例です。
<template>
<form @submit="handleSubmit(onSubmit)">
<div>
<label>名前</label>
<input v-model="name" type="text" />
<span style="color: red">{{ errors.name }}</span>
</div>
<div>
<label>メールアドレス</label>
<input v-model="email" type="email" />
<span style="color: red">{{ errors.email }}</span>
</div>
<button type="submit">送信</button>
</form>
</template>
<script setup>
import { useForm } from 'vee-validate'
import * as yup from 'yup'
const schema = yup.object({
name: yup.string().required('名前は必須です'),
email: yup.string().email('正しいメール形式で入力してください').required('メールは必須です')
})
const { handleSubmit, errors, values } = useForm({
validationSchema: schema
})
const name = values.name
const email = values.email
const onSubmit = (values) => {
console.log('送信データ:', values)
}
</script>
リアルタイムバリデーションとエラー表示
vee-validateでは、errorsオブジェクトに各フィールドのエラーメッセージが格納されます。リアルタイムでのチェックや、バリデーション結果に応じてボタンを無効化する処理も容易に実装できます。
<button type="submit" :disabled="Object.keys(errors).length > 0">
バリデーションOKで有効化
</button>
カスタムバリデーションルールの追加
yupでは、独自のバリデーションルールを拡張することも可能です。たとえばパスワードの強度チェックなども対応できます。
const schema = yup.object({
password: yup.string()
.required()
.min(8, '8文字以上で入力してください')
.matches(/[A-Z]/, '大文字を含めてください')
})
vee-validateのメリット
- フォームの状態（値・エラー・タッチ）を一元管理
- Composition APIとの親和性が高く、可読性が良い
- yupと連携することで、複雑なルールも簡潔に記述できる
まとめ
vee-validateを使えば、Vueアプリケーションにおけるフォームのバリデーション処理を簡潔かつ強力に実装できます。yupとの組み合わせにより、業務システムに必要な複雑なチェックも柔軟に対応可能です。保守性・拡張性に優れたバリデーション設計を目指すなら、vee-validateの導入は非常に有効です。
