Vue.jsはv-modelという簡単な構文が用意されており、inputタグやtextareaタグ中の値を動的に確認できます。同期的にJavaScript上の値として扱うこともできます。
この様に入力された値を扱うことが出来るならば動的なバリデーションの実装まであと一歩です。単純なルールならば特別なライブラリをつかうまでもありません。
しかしメールで正規表現を使いだしたり、パスワードで確認フィールドを使いだしたりしたあたりから徐々に複雑化していきます。VeeValidateはそういったバリデーション機能をまとめたVue.js用のライブラリです。
VeeValidate
vee-validate – npm
例によってnpmパッケージされています。ディレクティブとして使う方法とコンポーネントとして使う方法がありますが、この記事はディレクティブによる方法の紹介になります。
以下が日本語版VeeValidateの読み込みです。私の場合、Vue.jsをインスタンス化している.jsファイルに記述しています。共通の辞書を使った方が統一されたデザインになるのでVueに色々なライブラリをuseさせるbootstrap的な.jsファイルを作ってそこに記述するのもよいでしょう。
import Vue from "vue";
import App from "./App.vue";
/** ここから */
import VeeValidate,{Validator} from "vee-validate";
import ja from "vee-validate/dist/locale/ja";
Validator.localize('ja', ja);
Vue.use(VeeValidate,{
locale: 'ja',
});
/** ここまでがVeeValidateの読み込みとVueへの備え付け */
new Vue({
render: h => h(App)
}).$mount("#app");
このようにすると次の様に、バリデーションルール定義&チェック用ディレクティブであるv-validate、バリデーションメッセージ中で使われる名前を定義するディレクティブdata-vv-as、Vueインスタンス直下のプロパティにバリデーションエラークラスのインスタンスであるerrors、が追加されます。
<template>
<div id="app">
<label for="hogehoge">{{labelName}}</label>
<input
id="hogehoge"
name="hogehoge"
:data-vv-as="labelName"
v-model="inputValue"
v-validate="'email'"
>
<p>{{ errors.first('hogehoge') }}</p>
</div>
</template>
<script>
export default {
name: "App",
data: () => {
return {
labelName: "メアド",
inputValue: null
};
}
};
</script>
これが実際に動いているのは次になります。メアド欄にメアドとして成り立たない文字列を打ち込むとバリデーションエラーメッセージを表示する様にしました。
configやErrorBagクラス（これのインスタンスがデフォルトでerrorsに格納される)やValidatorに生えているメソッドを調べるともっと複雑なことも単純な記述でできるようになります。
Configuration ｜ VeeValidate
API ｜ VeeValidate
