veevalidate3 入門

開発環境

• laravel5.8
• vue2
• veevalidate3

参考資料

• 公式：https://logaretm.github.io/vee-validate/
• https://logaretm.github.io/vee-validate/guide/validation-provider.html#higher-order-components

veeValidate3の設定

• app.jsで必要な物をimport(vueとveevalidateはnpm installしていることを前提)

app.js

import Vue from 'vue'
import './validate'

import {
    ValidationProvider,
    configure,
    localize,
    extend,
} from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja';

Vue.component('ValidationProvider', ValidationProvider);

// 共通で変更したいoptionがあれば
configure({
    bails: false,
});

// 一括でrulesをextend
import * as rules from 'vee-validate/dist/rules';
for (let rule in rules) {
    extend(rule, rules[rule]);
}

localize('ja', ja);

バリデーション実行

• templateに記述する例

sample.vue

<ValidationProvider rules="required" ref="mail" v-slot="{ errors }">
     <input v-model="email" type="text" />
     <span>{{ errors[0] }}</span>
</ValidationProvider>

rluesで適応させるバリデーションを設定
以下でバリデーションの種類を確認できる

github
https://github.com/logaretm/vee-validate/tree/master/src/rules

エラーメッセージの変更

vue

this.$refs[this.name].setErrors(["error message"]);

エラーメッセージの取得

vue

this.$refs[this.name].messages;

ボタン押下時のバリデーション

• $refsを使用しバリデーションを実行

sample.vue

<template>
    <div class="container--small">
        <ValidationProvider rules="required" ref="myinput" v-slot="{ errors }">
            <input v-model="value" type="text" />
            <span>{{ errors[0] }}</span>
        </ValidationProvider>

        <button @click="validateField()">Submit</button>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    computed: {},
    methods: {
        validateField() {
            // Validate the field
            return this.$refs.myinput.validate();
        }
    },
    created() {}
};
</script>

別ファイルでバリデーション追加

画面固有バリデーション

checkboxのバリデーション

sample.vue

<template>
    <div class="container--small">
        <P>check box v-for</P>
        <div class="form-check">
            <label class="form-check-label">
                <ValidationProvider rules="required" v-slot="{ errors }">
                    <div v-for="(item, index) in checkArray" :key="index">
                        <input type="checkbox" v-model="checkValue" :value="item.id" />
                        {{ item.val }}
                    </div>
                    <span>{{ errors[0] }}</span>
                </ValidationProvider>
            </label>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // チェック結果が入りv-modelをrequiredチェックしている
            checkValue: [],
            checkArray: [
                { id: "1", val: "coffe" },
                { id: "2", val: "milk" },
                { id: "3", val: "cake" }
            ]
        };
    },
    computed: {},
    methods: {},
    created() {}
};
</script>