Vue.js バリデーション #Vue.js

ライブラリ

VeeValidate が機能豊富でメンテナンスも継続的に行われている。vuelidate もよく紹介されているが、こちらは最新リリースが2018年5月リリースのv0.7.4となっている。（2019年11月時点）

参考

Form Validation - Vue.js
- Alternative PatternとしてvuelidateとVeeValidateが紹介されている
vee-validate と bootstrap-vue を連携させてお手軽フォームバリデーションを実現する
- vuelidateよりもVeeValidateの方が直感的でおすすめとのこと

VeeValidateの使い方（BootstrapVueとの組み合わせ）

基本的な使い方は UI libraries BoostrapVue がとても参考になる。

対象バージョン

Vue.js 2.6.10
VeeValidate 3.0.11
BootstrapVue 2.0.4

※ VeeValidateは3系で大きく使い方が変わっているが、VeeValidateについて検索すると古いバージョンに関する記事が多くヒットするため、参考にする際は説明されているVeeValidateのバージョンに注意すること。

インストール

npm install -S vee-validate

コンポーネント読み込み

グローバルに全ルール・メッセージバンドル版を読み込む場合は、main.tsで以下のように記述する。

import Vue from 'vue';
// @ts-ignore
import { ValidationProvider } from 'vee-validate/dist/vee-validate.full';
import { ValidationObserver } from 'vee-validate';

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

プロダクション用には、バンドルサイズを抑えるために必要なルール・メッセージのみインポートする方がよい。（参考：Importing validation rules）

提供されているルール一覧は Validation Rules を参照。

バリデーション実装

フォームコンポーネントの実装例（Form.ts）：

<template>
  <ValidationObserver ref="observer" v-slot="{ passes }">
    <b-form novalidate @submit.prevent="passes(onSubmit)">
      <ValidationProvider name="title" rules="required|max:10"
                          v-slot="{ errors, valid, validated }">
        <b-form-group label-cols-sm="3" label="Title" label-for="title">
          <b-form-input v-model="title" type="text"
            :state="validated ? valid : null"></b-form-input>
          <b-form-invalid-feedback>{{ errors[0] }}</b-form-invalid-feedback>
        </b-form-group>
      </ValidationProvider>
      <b-form-group>
        <b-row class="justify-content-center">
          <b-button class="col-sm-4" type="submit" variant="primary">Submit</b-button>
        </b-row>
      </b-form-group>
    </b-form>
  </ValidationObserver>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component()
export default class Form extends Vue {
  private title: string = '';
  private onSubmit(): void {
    ...
  }
}
</script>

Validation Provider コンポーネントでは、rules属性に適用するバリデーションルール（上記の場合は必須かつ10文字以内というルール）を列挙し、name属性にエラーメッセージに使われるフィールド名を指定する。（参考：Customizing the filed name）b-form-input のstate属性を validated ? valid : null と指定することで、「初期表示状態ではエラーメッセージを表示せずに、初回入力後にバリデーション違反があれば表示する」という制御をしている。

ValidationObserver コンポーネントを使うことで、フォーム全体のバリデーション状態に基づいて制御が記述できる。上記では @submit.prevent="passes(onSubmit)" により、フォーム送信時にバリデーションを実行して、バリデーションを通過した場合のみ onSumit を実行するようにしている。