VeeValidateはVue.jsのバリデーションライブラリです。VeeValidateは適切な設定を適切な場所に当てはめることで動的バリデーションを実現します。記事時点最新のバージョンは3.2.4です。
VeeValidate
【Vue.js】バリデーション用ライブラリVeeValidateの紹介 – 株式会社シーポイントラボ ｜ 浜松のシステム開発会社
VeeValidate 2.xでは次の様に記述していました。
<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>
便利なことには違いないのですがディレクティブや暗黙のうちに設定された変数などを追うのはいささか手間でした。3.xからはコンポーネント指向な作りが重視されており、例えば次の様にできます。
<template>
<div id="app">
<validation-provider rules="required" v-slot="{ errors }" name="必須項目">
<label>必須項目</label>
<input v-model="value" name="myinput" type="text">
<span>{{ errors[0] }}</span>
</validation-provider>
</div>
</template>
<script>
import { ValidationProvider } from "vee-validate";
export default {
components: {
ValidationProvider
},
data() {
return {
value: null
};
}
};
</script>
書き手で決まられるエラーメッセージ配列変数errorsとラベル名nameとルール設定rulesの三種だけで済みます。名前も直感的で短くてありがたいです。何よりディレクティブを暗記する必要がありません。
ルールの拡張も小さくまとまって容易になりました。Vueインスタンス化前にvee-validateから呼んだextend関数を都度、実行すればOKです。
import Vue from "vue";
import App from "@/App";
import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
// ここから拡張
extend("required", {
...required,
message: "入力する必要があります"
});
extend('max-str-len', {
validate(value, args) {
return value.length <= args.length;
},
params: ['length'],
message: '{_field_}は{length}文字以下である必要があります。',
});
// ここまで拡張
new Vue({
render: h => h(App)
}).$mount("#app");
メッセージルールの拡張については次が詳しいです。
Basics ｜ VeeValidate
上記例ではフローを分かりやすくするためにインスタンス化コードに直書きですが複雑なルールを組むときは別ファイルに分けると良いでしょう。
// app.js
import Vue from "vue";
import App from "@/App";
import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
// ここから拡張
import appendExtendRules from './validationRules';
appendExtendRules();
// ここまで拡張
new Vue({
render: h => h(App)
}).$mount("#app");
/*********************************************************/
// validationRules.js
import {extend} from 'vee-validate';
import {email, required} from 'vee-validate/dist/rules';
/**
* VeeValidateのカスタムルール設定を実行
*/
export default function apendExtendRules() {
extend('max-str-len', {
validate(value, args) {
return value.length <= args.length;
},
params: ['length'],
message: '{_field_}は{length}文字以下である必要があります。',
});
......
// 更にツリー的に別ファイル構造を作るのもあり
// とにかく人間が把握できるサイズにまとまる様にするといい感じ
appendMemberRules();
appendProductRules();
}
