月: 2018年7月

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で判定する。