「Vuelidate」でVue.js専用のバリデーションを実装する

Vuelidateとは

VuelidateはVue.js専用のバリデーションライブラリです。

vee-validateなど他にも有名なバリデーションライブリがありますが、Vuelidateはテンプレートとアプリケーションロジックが分離しているという特徴があります。

一見すると冗長に感じますが、複雑なバリデーションが必要なときに、効果的に実装することができます。

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vuelidate --save

CDN

<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/validators.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/vuelidate/vuelidate

導入手順

1. ライブラリの取り込み

webpack等の場合 ※モジュール版は未検証です。

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

WEBページの場合

Vue.use(window.vuelidate.default);

2.バリデーションルールを設定

今回はIDとパスワードのフォームに必須入力と入力数制限を実装したいと思います。

まず使用したいバリデーションルールをvalidatorsから取得します。
必須項目（required）、最小文字数（minLength）、最大文字数（maxLength）を取得します。

const { required, minLength, maxLength } = window.validators
new Vue({
  el: '#app',
  data: {
    text: '',
    password: ''
  },
  validations: {
    text: {
      required,
      minLength: minLength(5)
    },
    password: {
      required,
      minLength: minLength(4),
      maxLength: maxLength(8),
    }
  },
  methods: {
    status(validation) {
      return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  }
 })

3. テンプレートを準備

v-modelの値を検証します。
v-modelには$v.text.$modelのような形で設定します。

<div id="app">
    <div>
      　<p>ID＊：</p>
        <input type="text" v-model="$v.text.$model" :class="status($v.text)">
        <p class="note">{{ $v.text.$params.minLength.min }}文字以上</p>
        <div v-if="$v.text.$dirty">
            <div class="error" v-if="!$v.text.required">IDは必須入力です。</div>
            <div class="error" v-if="!$v.text.minLength">IDは{{ $v.text.$params.minLength.min }}文字以上で入力してください。</div>
        </div>
    </div>
    <div>
        <p>パスワード＊：</p>
        <input type="password" v-model="$v.password.$model" :class="status($v.password)">
        <p class="note">{{ $v.password.$params.minLength.min }}文字以上{{ $v.password.$params.maxLength.max }}文字以内で入力</p>
        <div v-if="$v.password.$dirty">
            <div class="error" v-if="!$v.password.required">パスワードは必須入力です。</div>
            <div class="error" v-if="!$v.password.minLength">パスワードは{{ $v.password.$params.minLength.min }}文字以上で入力してください。</div>
            <div class="error" v-if="!$v.password.maxLength">パスワードは{{ $v.password.$params.maxLength.max }}文字以内で入力してください。</div>    
        </div>
    </div>  
</div>

サンプル

>>専用ページで確認する

バリデーションルール

設定例

var required = validators.required
var maxLength = validators.maxLength
...
  data: {
    text: '',
  },
  validations: {
    text: {
      required,
      mixLength: mixLength(5)
    }
  }
...

<input type="text" v-model="$v.text.$model">

一覧

ドキュメントはこちら

まとめ

VuelidateでVue.js専用のバリデーションを実装するでした。

まだ実務では利用した事が無いのですが、かなり便利そうなのでどこかの案件で使いたいなあと思ってます。

今日はこの辺でー