概要
本記事は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というディレクトリが作成されているので、以下のように設定を行います。
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を出力する
<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. スタイルの調整
<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を編集します。
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. 同期的なバリデーション
<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. 日本語エラーメッセージの表示
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の変更も可能で、本来「数字のみ使用できます」のところを「半角数字のみ使用できます」に変更しています。
<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のバリデーションにつまずいている方にとって、何か発見につながれば幸いです。