vee-validateはフォームバリデーションのルールをシンプルに記述できる便利なライブラリです。
Vue.jsのテンプレート内にvee-validateのコンポーネントを利用することで、比較的簡単にバリデーションを設定することができます。
前提条件
- Nuxt.jsのプロジェクトがインストールされている
- Vuetifyがインストールされている
インストール
1 2 3 |
$ yarn add vee-validate or $ npm install vee-validate --save |
です。
プラグインファイルの作成
pluginsディレクトリにvee-validate.js
を作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { ValidationProvider, extend, localize } from "vee-validate"; import { required, max } from "vee-validate/dist/rules"; import ja from "vee-validate/dist/locale/ja.json"; extend("required", { ...required }); extend("max", { ...max }); localize("ja", ja); |
localize()メソッドでメッセージを日本語することができます。
テンプレート例
Vuetifyのinputフィールドやボタンのコンポーネントを利用し、フォームを作成しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<template> <div> <v-app> <v-container> <h2>トピック名を入力してください。</h2> <hr> <ValidationObserver ref="obs" v-slot="{ invalid, validated, passes, validate }"> <v-form @submit.prevent="passes(create)"> <v-row> <v-col cols="12" sm="6" md="3"> <ValidationProvider v-slot="{ errors, valid }" rules="required|max:10" name="タイトル" > <v-text-field v-model.trim="form.title" label="トピックタイトル" placeholder="タイトルを入力してください。" :error-messages="errors" :success="valid" autofocus clearable ></v-text-field> <small class="form-text text-danger" v-if="serverSideErrors.title">{{ serverSideErrors.title[0] }}</small> </ValidationProvider> </v-col> </v-row> <v-row> <v-col cols="12" sm="6" md="3"> <ValidationProvider v-slot="{ errors, valid }" rules="required" > <v-textarea v-model="form.body" name="input-7-1" label="トピック本文" placeholder="投稿本文を入力してください。" :error-messages="errors" :success="valid" hint="投稿本文を入力" clearable ></v-textarea> <small class="form-text text-danger" v-if="serverSideErrors.body">{{ serverSideErrors.body[0] }}</small> </ValidationProvider> </v-col> </v-row> <v-row> <v-col cols="12" sm="6" md="3"> <v-btn color="warning" dark type="submit" :disabled="invalid" >作成</v-btn> </v-col> </v-row> </v-form> </ValidationObserver> </v-container> </v-app> </div> </template> <script> import { ValidationObserver, ValidationProvider } from 'vee-validate' export default { middleware: [ 'auth' ], components: { ValidationObserver, ValidationProvider }, data() { return { form: { title: '', body: '' }, isError: false } }, methods: { async create() { await this.$axios.$post('/topics', this.form) .catch(err => { this.isError = true; }) if (this.isError) { this.$router.push('/dashboard'); return; } this.$router.push('/') } } } </script> |
<ValidationObserver>タグでフォーム全体を囲み、
<ValidationProvider>タグで1つ1つのフォームを囲みます。

ValidationProviderタグにname属性を追加することで、画像のようなタイトルは必須項目です
というメッセージを出力することができます。
name属性を指定しないと{field}は必須項目です。
といった表記になるので注意してください。