概要

本記事はVue2 Options Apiを使用しています。バージョンの違いにご注意ください。

vue.jsを使って、同期的にバリデーションを行う入力フォームを作る方法について解説していきます。

b-form-inputとは、BootstrapVueを導入することで使える入力用のタグです。

ValidationProviderとは、VeeValidateを導入することで使えるバリデーターです。

以下のような入力フォームを作ることを目的とします。

入力イベントに同期してバリデーションを行います。

実行環境

vue@2.7.16
bootstrap-vue@2.23.1
vee-validate@3.4.15

vue.jsを導入する

1. Vue CLIのインストール

今回はVue2を選んでください。

npm install -g @vue/cli

2. 新規プロジェクトの作成

vue create my-project

もし以下のようなエラーが出た場合については、こちらの記事に対処法が載っています。

vue : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\を読み込むことができません。

PowerShell vue : このシステムではスクリプトの実行が無効になっているため～
エラーの対処法

3. プロジェクトディレクトリへ移動

cd my-project

4. BootstrapVueのインストール

npm install bootstrap bootstrap-vue

5. ValidationProviderのインストール

npm install vee-validate@3

Vue2を選択した場合、vee-validate@3としてバージョンを合わせます。

6. 初期設定

ひと通りインストールが終わると、main.jsというディレクトリが作成されているので、以下のように設定を行います。

main.js

import Vue from 'vue';
import App from './App.vue';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import { ValidationProvider } from 'vee-validate';

// BootstrapVueのプラグインを使用
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

// VeeValidateのValidationProviderを登録
Vue.component('ValidationProvider', ValidationProvider);

new Vue({
  render: h => h(App),
}).$mount('#app');

7. サーバーを立ち上げる

http://localhost:8080/
などで立ち上がるようになります。

npm run serve

これらの手順を経て、以下の画面が出力されれば成功です。
これからVueを使えるようになります。

フォーム作成手順

目標は、以下の要件を達成することです。順番に行っていきましょう。

b-form-inputを出力する
スタイルの調整
ValidationProviderコンポーネントをグローバルに使う
同期的なバリデーション
日本語エラーメッセージの表示

この部分にフォームを実装していきます。

1. b-form-inputを出力する

HelloWorld.vue

<template>
　<b-form-input v-model="price" placeholder="例）123など"></b-form-input>
</template>

<script>
export default {
  data() {
    return {
      price: 0
    }
  }
}
</script>

b-form-inputの使い方は簡単です。タグを置くだけ。
v-modelを使って、入力データを動的に監視します。

すると、大きな入力エリアができたと思います。
次はスタイルを調整していきます。

2. スタイルの調整

HelloWorld.vue

<template>
　<div style="padding-top: 50px;">
    <b-row class="justify-content-center">
    　<b-col cols="3">
        <b-form-input v-model="price" placeholder="例）123など"></b-form-input>
    　</b-col>
    </b-row>
　</div>
</template>

<script>
export default {
  data() {
    return {
      price: 0
    }
  }
}
</script>

スタイルの調節にはb-rowとb-colを使います。
colsは"12"を最大として大きさを表します。
今回は1/4の大きさにしたかったのでcols="3"にしました。

また、その他に自由にスタイルを埋め込みたい場合は、b-form-inputにclassを付けることも可能です。

3. ValidationProviderコンポーネントをグローバルに使う

グローバル（すべてのファイル）でValidationProviderが使えるようにmain.jsを編集します。

main.js

import { extend, ValidationProvider } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]);
});

これにより、各ファイルでインポートしなくてもValidationProviderが使用できるようになります。

4. 同期的なバリデーション

HelloWorld.vue

<template>
    <div style="padding-top: 50px;">
      <p>金額入力フォーム</p>
      <ValidationProvider
        v-slot="validationContext"
        rules="required|numeric"
        :immediate="true"
      >
        <b-row class="justify-content-center">
          <b-col cols="3">
            <b-form-input 
              v-model="price" 
              placeholder="例）123など"
              :state="getValidationState(validationContext)"
            >
            </b-form-input>
          </b-col>
        </b-row>
      </ValidationProvider>
    </div>
</template>

<script>
export default {
  data() {
    return {
      price: 0
    }
  },

  methods: {
    getValidationState({ validated, valid }) {
      return validated ? valid : null;
    },
  },
}
</script>

同期的なバリデーションに必要な要素は以下の通りです。

ValidationProviderのv-slotにより、validationContext（バリデーションの状態）を定義する
rulesによってバリデーションルールを定義する。定義できるものはvee-validateに準拠している
b-form-inputのstate属性を切り替えることで、エラーかそうでないかを切り替えることができる
immediate属性により、フォーム送信時ではなく、入力時に即時バリデーションをするようになる

最後に、エラーメッセージを出力していきます。

5. 日本語エラーメッセージの表示

main.js

import { extend, ValidationProvider, localize } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja';

localize('ja', ja);

localize({
  ja: {
    messages: {
      ...ja.messages,
      numeric: '{_field_}は半角数字のみ使用できます',
    }
  }
});

localizeとjaをインポートして、日本語メッセージで表示するように設定します。
また、messageの変更も可能で、本来「数字のみ使用できます」のところを「半角数字のみ使用できます」に変更しています。

HelloWorld.vue

<template>
    <div style="padding-top: 50px;">
      <p>金額入力フォーム</p>
      <ValidationProvider
        v-slot="validationContext"
        rules="required|numeric"
        :immediate="true"
      >
        <b-row class="justify-content-center">
          <b-col cols="3">
            <b-form-input 
              v-model="price" 
              placeholder="例）123など"
              :state="getValidationState(validationContext)"
            >
            </b-form-input>
          </b-col>
        </b-row>
      </ValidationProvider>
    </div>
</template>

<script>
export default {
  data() {
    return {
      price: 0
    }
  },

  methods: {
    getValidationState({ validated, valid }) {
      return validated ? valid : null;
    },
  },
}
</script>

エラーメッセージの表示に必要な要素は以下の通りです。

ValidationProviderにname属性を付けて、フィールド名をメッセージに渡す
b-form-invalid-feedbackを使い、コンテキストから受け取ったエラーメッセージを表示する

以上により、同期的なバリデーションを定義することができました。

まとめ

個人的に「何がどこと繋がっているかわからない」という状態で非常に苦労したため、順を追って詳しくまとめてみました。

長くなってしまいましたが、同じくVueのバリデーションにつまずいている方にとって、何か発見につながれば幸いです。