VeeValidateとは

VeeValidateは、Vue.js用のバリデーションコンポーネントライブラリです。

全部で27種類のバリデーションパターンを備えています。

おそらくVue.js用のバリデーションでは最大の人気があります。
Githubスター 6千超え、Used by 1万7千超えの超モンスター級に人気です。

 

vue.js用のバリデーション「VeeValidate」の使い方

 

環境

vue.js 2.6.10
vee-validate.js 3.2.3
rules.umd.min.js 3.2.3

インストール

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

npm

npm i vee-validate --save

yarn

yarn add vee-validate

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rules.umd.min.js"></script>

 

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

https://github.com/logaretm/vee-validate

 

導入手順

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

(1)webpack等の場合 [注意]モジュール版は未検証です。

import { extend, ValidationProvider, ValidationObserver } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
// バリデーションルール
extend('required', required);
extend('email', email);

(2)WEBページの場合

const VeeValidate = window.VeeValidate;
// フィールド監視
const ValidationProvider = VeeValidate.ValidationProvider;
// フォーム監視
const ValidationObserver = VeeValidate.ValidationObserver;
// バリデーションルール
const VeeValidateRules = window.VeeValidateRules;
VeeValidate.extend('required', VeeValidateRules.required);
VeeValidate.extend('email', VeeValidateRules.email);

2.メソッドを設定

Vue.component に上記で取得した ValidationProvider ValidationObserver を読み込ませます。

この2つの使い分けは以下になります。

ValidationProvider 各フィールドを監視するのに使用します。
ValidationObserver フォーム全体を監視するのに使用します。

混乱しそうですが、ValidationObserver 各フィールドでエラーが発生している時に、ボタンを非表示するなどができます。

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

let app = new Vue({
  el: '#app',
  data: {
    name: '',
    email: ''
  },
  methods: {
    submit: function(){
      alert('送信しました!');
    }
  }
});

3. テンプレートを準備

フォーム全体を <ValidationObserver> で囲みます。
v-slot プロパティで、各フォームの取得したい状態を得ます。

各フィールドを  <ValidationProvider> で囲みます。
rules プロパティにバリデーションルール名を設定します。
バリデーションルールを複数設定したい場合は、 | で区切ります。

※ サンプルはHTML直書きを想定しているため、ケバブケースに置き換えています。

<div id="app">
  <validation-observer ref="obs" v-slot="ObserverProps">
    <label>名前</label>
    <validation-provider name="名前" rules="required">
      <div slot-scope="ProviderProps">
        <input v-model="name">
        <p class="error">{{ ProviderProps.errors[0] }}</p>
      </div>
    </validation-provider>
    <label>メールアドレス</label>
    <validation-provider name="メールアドレス" rules="required|email">
      <div slot-scope="ProviderProps">
        <input v-model="email">
        <p class="error">{{ ProviderProps.errors[0] }}</p>
      </div>
    </validation-provider>
    <button type="button" @click="submit" :disabled="ObserverProps.invalid || !ObserverProps.validated">送信</button>
  </validation-observer>
</div>

 

サンプル

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

 

バリデーションルール

alpha

検証中のフィールドには、アルファベット文字のみを含めることができます。

<ValidationProvider rules="alpha" v-slot="ProviderProps">
  <input v-model="value" type="text">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

alpha_dash

検証中のフィールドには、アルファベット文字、数字、ダッシュまたはアンダースコアが含めることができます。

<ValidationProvider rules="alpha_dash" v-slot="ProviderProps">
  <input v-model="value" type="text">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

alpha_num

検証中のフィールドには、アルファベット文字または数字を含めることができます。

<ValidationProvider rules="alpha_num" v-slot="ProviderProps">
  <input v-model="value" type="text">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

alpha_spaces

検証中のフィールドには、アルファベット文字または半角スペースを含めることができます。

<ValidationProvider rules="alpha_spaces" v-slot="ProviderProps">
  <input v-model="value" type="text">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

between

検証中のフィールドには、最小値と最大値で区切られた数値を設定することができます。

<ValidationProvider rules="between:1,11" v-slot="ProviderProps">
  <input v-model="value" type="text">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

confirmed

検証中のフィールドは、確認フィールドと同じ値を設定することができます。

<ValidationObserver>
  <ValidationProvider rules="confirmed:confirmation" v-slot="ProviderProps">
    <input v-model="value" type="text">
    <span>{{ ProviderProps.errors[0] }}</span>
  </ValidationProvider>
  <ValidationProvider v-slot="ProviderProps" vid="confirmation">
    <input v-model="confirmation" type="text">
    <span>{{ ProviderProps.errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>

 

digits

検証中のフィールドは、数値で指定された桁数を設定することができます。

<ValidationProvider rules="digits:3" v-slot="ProviderProps">
  <input v-model="value" type="text">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

dimensions

検証中のフィールドは、追加されるファイルが正確に指定された寸法を持つ画像(jpg、svg、jpeg、png、bmp、gif)を設定することができます。

<ValidationProvider rules="dimensions:150,150" v-slot="ProviderProps">
  <input type="file" @change="ProviderProps.validate">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

email

検証中のフィールドは、有効なメールアドレスを設定することができます。

<ValidationProvider rules="email" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

ext

検証中のフィールドに追加されるファイルには、指定された拡張子のいずれかが必要です。

<ValidationProvider rules="ext:jpg,png" v-slot="ProviderProps">
  <input type="file" @change="ProviderProps.validate">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

image

検証中のフィールドに追加されるファイルには、イメージMIMEタイプ(image / *)が必要です。

<ValidationProvider rules="image" v-slot="ProviderProps">
  <input type="file" @change="ProviderProps.validate">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

oneOf

検証中のフィールドには、指定されたリストにある値が必要です。チェックに二重等号使用します。

<ValidationProvider rules="oneOf:1,2,3" v-slot="ProviderProps">
  <select v-model="value">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Invalid</option>
  </select>
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

is

検証中のフィールドは、渡された最初の引数と等しくなければならず ===、等価性チェックに使用されます。このルールは、オブジェクト形式で使用するときにパスワードを確認するのに役立ちます。文字列形式を使用すると、引数が文字列として解析されるため、このルールを使用する場合はオブジェクト形式を使用してください。

<ValidationProvider rules="is:hello" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

length

検証中のフィールドは指定された長さである必要があります。

<ValidationProvider name="max_value" rules="max_value:4">
  <div slot-scope="ProviderProps">
    <input name="max_value" v-model="max_value">
    <p class="error">{{ ProviderProps.errors[0] }}</p>
  </div>
</ValidationProvider>

 

max

検証の長さのフィールドは、指定された長さを超えることはできません。

<ValidationProvider rules="max:4" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

max_value

検証中のフィールドは数値である必要があり、指定された値を超えてはなりません

<ValidationProvider rules="max_value:4" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

mimes

検証中のフィールドに追加されるファイルタイプには、指定されたMIMEタイプのいずれかが必要です。

<ValidationProvider rules="mimes:image/*" v-slot="ProviderProps">
  <input type="file" @change="ProviderProps.validate">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

min

検証の長さの下にあるフィールドは、指定された長さより小さくすることはできません

<ValidationProvider rules="min:4" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

min_value

検証中のフィールドは数値である必要があり、指定された値より小さくすることはできません

<ValidationProvider rules="min_value:4" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

excluded

検証中のフィールドは指定の値を除外して構成する必要があります。

<ValidationProvider name="excluded" rules="excluded:1,2,3,4">
  <div slot-scope="ProviderProps">
     <input name="excluded" v-model="excluded">
     <p class="error">{{ ProviderProps.errors[0] }}</p>
  </div>
</ValidationProvider>

 

numeric

検証中のフィールドは数字のみで構成する必要があります。

<ValidationProvider rules="numeric" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

regex

検証中のフィールドは、指定された正規表現と一致する必要があります。

<ValidationProvider :rules="{ regex: /^[0-9]+$/ }" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

required

検証中のフィールドには空でない値が必要です。デフォルトでは、「空の値」が必要な場合を除き、すべてのバリデーターは検証に合格します。これらの空の値は次のとおりです。空の文字列、undefinednull、空の配列。

<ValidationProvider rules="required" v-slot="ProviderProps">
  <input type="text" v-model="value">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

required_if

検証中のフィールドは、ターゲットフィールド(最初の引数)が指定された値(他の引数)のいずれかに設定されている場合のみ空でない値を持つ必要があります。

<ValidationProvider rules="" vid="country" v-slot="x">
  <select v-model="country">
    <option value="US">United States</option>
    <option value="OTHER">Other country</option>
  </select>
</ValidationProvider>
<ValidationProvider rules="required_if:country,US" v-slot="ProviderProps">
  <input type="text" placeholder="state" v-model="state" />
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

size

検証中のフィールドに追加されるファイルサイズは、指定されたサイズ(キロバイト単位)を超えてはなりません

<ValidationProvider rules="size:100" v-slot="ProviderProps">
  <input type="file" @change="ProviderProps.validate">
  <span>{{ ProviderProps.errors[0] }}</span>
</ValidationProvider>

 

サンプル

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

 

言語設定

バリデーションのメッセージは基本が英語になっています。
これを日本国内で使うのは難しいので、メッセージを日本語に設定します。

webpack等の場合

※モジュール版は未検証です。

import { localize } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja.json';
localize({ja});

WEBページの場合

[注意] localizeextend の後に設置しないと上手く動きません。

const ja = {
  "code": "ja",
  "messages": {
    "alpha": "{_field_}はアルファベットのみ使用できます",
    "alpha_num": "{_field_}は英数字のみ使用できます",
    "alpha_dash": "{_field_}は英数字とハイフン、アンダースコアのみ使用できます",
    "alpha_spaces": "{_field_}はアルファベットと空白のみ使用できます",
    "between": "{_field_}は{min}から{max}の間でなければなりません",
    "confirmed": "{_field_}が一致しません",
    "digits": "{_field_}は{length}桁の数字でなければなりません",
    "dimensions": "{_field_}は幅{width}px、高さ{height}px以内でなければなりません",
    "email": "{_field_}は有効なメールアドレスではありません",
    "excluded": "{_field_}は不正な値です",
    "ext": "{_field_}は有効なファイル形式ではありません",
    "image": "{_field_}は有効な画像形式ではありません",
    "is": "{_field_}が一致しません",
    "length": "{_field_}は{length}文字でなければなりません",
    "max_value": "{_field_}は{max}以下でなければなりません",
    "max": "{_field_}は{length}文字以内にしてください",
    "mimes": "{_field_}は有効なファイル形式ではありません",
    "min_value": "{_field_}は{min}以上でなければなりません",
    "min": "{_field_}は{length}文字以上でなければなりません",
    "numeric": "{_field_}は数字のみ使用できます",
    "oneOf": "{_field_}は有効な値ではありません",
    "regex": "{_field_}のフォーマットが正しくありません",
    "required": "{_field_}は必須項目です",
    "required_if": "{_field_}は必須項目です",
    "size": "{_field_}は{size}KB以内でなければなりません"
  }
};

VeeValidate.localize('ja', ja);

 

カスタムルール

VeeValidateは自作のカスタムルールを設定することが可能です。

基本設定

基本的なカスタムルールを設定する方法は以下の記事を参考にしてください。

VeeValidateのカスタムルールの設定方法(v3系)

クロスフィールド

フィールドを比較するようなカスタムルールを設定するには以下の記事を参考にしてください。

VeeValidateのクロスフィールドカスタムルールの設定方法(v3系)

 

IE11でエラーが発生した場合

VeeValidateIE11で使うとエラーが発生します。
対応方法は以下のページで公開してます。

VeeValidateがIE11で使えない時の対応方法

 

ユースケース

フォームを作っている時に、割と出てくるけどVeeValidateを使う方法が分かりにくい用法を記載していきます。

同意するチェックボックス

required ルールにオブジェクトで  allowFalse プロパティ false を設定する

  <validation-observer ref="obs" v-slot="ObserverProps">
    <div class="filed">
        <validation-provider name="required" :rules="{ required: { allowFalse: false } }">
          <div slot-scope="ProviderProps">
            <input type="checkbox" v-model="value" true-value="on" false-value="">同意する
            <p class="error">{{ ProviderProps.errors[0] }}</p>
          </div>
        </validation-provider>
    </div>   
    <button type="button" @click="submit" :disabled="!ObserverProps.valid">送信</button>
  </validation-observer>

 

その他選択時のテキスト入力

watch を使ってラジオボタンの入力値を監視します。
その他が設定された場合 this.$refs.obs.refs.required_other.validate() を使って強制的にバリデーションを起動しています。

  <validation-observer ref="obs" v-slot="ObserverProps">
    <div class="filed">
      <validation-provider name="required" rules="required" vid="required">
        <div slot-scope="ProviderProps">
          <div v-for="(item, index) in items">
              <input type="radio" name="required" v-model="value" :value="item" :key="index">
              {{item}}
          </div>
          <div>
              <input type="radio" name="required" v-model="value" value="other">
              その他      
          </div>
          <p class="error">{{ ProviderProps.errors[0] }}</p>
        </div>
      </validation-provider>
      <validation-provider name="required_other" rules="required_if:required,other">
        <div slot-scope="ProviderProps">
          <input type="text" name="required_other" v-model="value2" value="">
          <p class="error">{{ ProviderProps.errors[0] }}</p>
        </div>
      </validation-provider>
    </div>
    <button type="button" @click="submit" :disabled="!ObserverProps.valid">送信</button>
  </validation-observer>
let app = new Vue({
  el: '#app',
  data: {
    value: 'coffee',
    value2:'',
    items: ['coffee', 'tea', 'juice', 'beer', 'milk'],
  },
  methods: {
    submit: function(){
      alert('送信しました!');
    }
  },
  watch : {
    value: function(value){
      if(value == 'other')
      {
        this.$refs.obs.refs.required_other.validate();
      }
    }
  }
});

 

さいごに

Vue.js用のバリデーションコンポーネントライブラリでした。

ソースコードで目がチカチカするので食わず嫌いをしてきましたが、使ってみたら超便利でした。
今後、管理人の実務では、このバリデーションライブラリがメインになってくると思います。

更新が間に合わなかった為、公開後に記事の改稿していきます。
・・・公式のサンプルでも上手く動かないよタスケテー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください