VeeValidate3で複数のフィールドをバリデーションする

環境

• Vue 2.6.11
• VeeValidate 3.2.5

はじめに

VeeValidate3系ではValidationObserverとValidationProviderを使ってバリデーションを行いますが、ValidationProviderは単一のフィールドが対象になります。開始終了時間のように複数のフィールドをセットでバリデーションしたい場合のやり方が分からなかったので調べてみました。

コンポーネント化

VueではUIコンポーネントを自作できるため、複数のフィールドを持つコンポーネントを作成して、コンポーネントのv-modelに対してバリデーションをするようにします。

Form.vue

<ValidationProvider ref="provider" v-slot="{ errors }" rules="fromToRequired">
  <FromToText v-model="fromToTime" />
  <span>{{ errors[0] }}</span>
</ValidationProvider>

FromToText.vue

<template>
  <div>
    <input type="text" v-model="text.from" />
    <span>～</span>
    <input type="text" v-model="text.to" />
  </div>
</template>

<script>
  export default {
    props: {
      value: Object,
    },
    data () {
      return {
        text: {}
      }
    },
    mounted () {
      this.text = this.value
    }
  }
</script>

v-modelに設定しているfromToTimeがObject型になっているところがポイントです。こうすることで一つのコンポーネントで複数のフィールドを扱えるようになります。後はこのObject型の変数のバリデーションを作成すれば完成です。

Form.vue

<script>
  import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
  import FromToText from '@/components/UIComponents/Inputs/FromToText'

  export default{
    components: {
      ValidationProvider,
      ValidationObserver,
      FromToText
    },
    data () {
      return {
        fromToTime: {}
      }
    },
    beforeCreate () {
      extend('fromToRequired', {
        validate: (value) => {
          if (value === null || value === undefined) {
            return {
              valid: false
            }
          }
          return {
            valid: value.from && value.to
          }
        },
        message: '開始と終了を両方入力してください。'
      })
    }
  }
</script>