スポンサーリンク

VeeValidate3.Xでバリデーション ~Laravel x Vue成長日記~ #5

VeeValidate

VeeValidateとはvue.js用のフォームのバリデーションライブラリです。

3系が2019年8月にリリースされて仕様が変わっているようなので、日本語でググってもあまり記事が出てこないので、公式のチュートリアルをみながら触ってみたいと思います。

VeeValidate
Template Based Form Validation Framework for Vue.js

VeeValidateをインストール

まずはインストール

npm install vee-validate --save

package.jsonに3系が追加されました。

        "vee-validate": "^3.0.5",

実装していきましょう

ルールとエラーの表示

emailの入力フィールドのバリデーションをできるようにしましょう。
生のVueだけで対応しようとすると正規表現自分で書かなきゃいけなかったりするところを一撃で終わらせたいところです。app.jsに以下のコードを追加してVeeValidateをimportします。
VeeValidateはv3からバリデーションルールは必要に応じてimportする仕様になったとのことです。すべてのルールを一括でimportしたい場合はこちらをご確認ください。
またVueインスタンスにはemailのデータだけ追加しておきます。

import { ValidationProvider, extend } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);
import { required, email } from 'vee-validate/dist/rules';
extend('required', required);
extend('email', email);

var app = new Vue({
  el: '#app',
  data: {
    email: null,
  }
})

ビルドし忘れないようにこのタイミングで以下を実行しておきましょう。

npm run watch

blade側は以下のようにバリデートしたいinputをvalidation-providerで囲み、rulesに適用したいルールを記述します。バリデーションの結果でエラーが存在すればerrorsにメッセージが入ってきます。エラーメッセージの表示するムスタシュはbladeでレンダリングされないように@を先頭に付け忘れないようにしないとですね。

<div id="app" v-cloak>
    Example VeeValidate
    <div>
        <validation-provider rules="required|email" v-slot="{ errors }">
            <input name="email" v-model="email" type="text" />
            <div style="color:red;">@{{ errors[0] }}</div>
        </validation-provider>
    </div>
</div>

この状態でアクセスして、任意の文字列を入力するとエラーメッセージが出ましたね!

ただ、このメッセージだと意味わからないのでメッセージをカスタマイズしましょう。
以下のようにするとメッセージを追加することができます。

extend('required', required);
extend('required', {message: 'This field is required'}); // 追加
extend('email', email);
extend('email', {message: 'Email format is invalid'}); // 追加

追加して再ビルドされたのが確認できたらページをリロードして任意の文字列を入力するとメッセージがカスタマイズできていることが確認できます。

ボタンを無効化

エラーが存在する場合はボタンをdisabledにしておきたいですよね。
こうなった場合にValidationObserverが登場します。

app.jsを以下のようにValidationObserverを追加します。

//ValidationObserverを追加
import { ValidationProvider, extend, ValidationObserver } from 'vee-validate'; 
Vue.component('ValidationProvider', ValidationProvider);
// ValidationObserverを追加
Vue.component('ValidationObserver', ValidationObserver);

ValidationObserverを追加したところで、validataion-providerをvalidation-observerでラップしslotプロパティでvalidを渡しましょう。その他の利用可能なプロパティはこちらに記載されております。

<div id="app" v-cloak>
    Example VeeValidate
    <div>
        <validation-observer v-slot="{ valid }">
            <validation-provider rules="required|email" v-slot="{ errors }">
                <input name="email" v-model="email" type="text" />
                <div style="color:red;">@{{ errors[0] }}</div>
            </validation-provider>
            <button :disabled="!valid">Submit</button>
        </validation-observer>
    </div>
</div>

このように修正したところでページを更新して任意の文字列を入力するとボタンが無効化されていることが確認できます。

そして、メールのフォーマットで入力するとボタンが有効化されることも確認できます。

コメント

タイトルとURLをコピーしました