Vue.js（TypeScript） のプロジェクトで validation を行いたい。
表示はcss フレームワーク Bulma を拡張したUIコンポーネントの Buefy を使う。
validation には VeeValidation を使う。
パッケージのインストール
$ npm install -D buefy node-sass sass-loader vee-validate
buefy を使う
buefyのアイコンを使うので、index.htmlに下記追加。
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
VeeValidate を使う
<template>
<div>
<b-field label="メールアドレス"
:type="errors.has('email') ? 'is-danger': ''"
:message="errors.has('email') ? errors.first('email') : ''">
<b-input
name="email"
v-model="email"
v-validate="'required|email'"
placeholder="メールアドレス">
</b-input>
</b-field>
</div>
</template>
・・・
<script lang="ts">
import Vue from "vue";
import Buefy from "buefy";
import VeeValidate from "vee-validate";
Vue.use(Buefy);
Vue.use(VeeValidate);
・・・
VeeValidate を日本語化
エラーメッセージが英語なので日本語化する。
ローカライズ用のメッセージファイルの読込と、フィールド名の日本語化を行う。
・・・
<b-input
name="email"
v-model="email"
v-validate="'required'"
data-vv-as="メールアドレス"
placeholder="メールアドレス">
・・・
<script lang="ts">
import Vue from "vue";
import Buefy from "buefy";
import VeeValidate, { Validator } from "vee-validate";
// @ts-ignore: implicitly has an 'any' type.
import VeeValidateJa from "vee-validate/dist/locale/ja";
Vue.use(Buefy);
Validator.localize("ja", VeeValidateJa);
Vue.use(VeeValidate);
・・・
フィールド名の日本語化は、data-vv-as を追加してフィールドごとに対応。
attributesファイルを用意しても出来るようです。
https://baianat.github.io/vee-validate/guide/localization.html#aliases
メッセージファイルの読込でエラーが出たので、ts-ignoreで対応、、、
入力チェックのタイミングを変更
メールアドレスのチェックなどで入力を始めるといきなりエラーとなるので、入力チェックを行うタイミングをフォーカスが外れた時にする。
Vue.use(VeeValidate, {
events: "blur"
});
ボタンクリックなどで入力チェック
ログイン処理など実際にはボタンクリックなどで全体の入力チェックを行うと思うので、その方法。
・・・
<a class="button is-primary is-fullwidth" @click="login()">ログイン</a>
・・・
methods: {
login() {
this.$validator
.validateAll()
.then(result => {
if (!result) {
console.log(this.$validator.errors.all());
return;
}
})
.catch(() => {
console.log(this.$validator.errors.all());
});
}
}
入力チェックでエラーがあってもcatchではなくthenが呼ばれる。入力エラーがあるかはresultで判定する。
