インストール

npm install vuelidate --save

グローバルで使用するときは、下記のように記述

import Vue from "vue";
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);

コンポーネント内で直接使用するときは、

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

のようにコンポーネントファイルに追加してください。

例えば、age と message という 2 つの属性にそれぞれ必須のバリデーションを、加えて、名前のほうに 4 文字以上で入力させたい場合は、下記のように validations の中でそれぞれrequired、name に minLength を書いていきます。

import { required, minLength, between } from "vuelidate/lib/validators";

export default {
  data() {
    form {
      name: "",
      message: ""
    };
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    message: {
      required
    }
  }
};

最後に、下記のようにフォームに使用する場合は、下記のように v-if="!$v.form.属性.バリデーション"でエラーメッセージを表示させることができます。(下記はVueの例です。)

<form @submit.prevent="validateForm">
  <div class="sender-info">
    <md-field :class="getValidationClass('name')">
      <label for="name" class="label">名前</label>
      <md-input
        name="name"
        id="name"
        autocomplete="given-name"
        v-model="form.name"
        class="md-accent"
      />
      <span class="md-error md-primary" v-if="!$v.form.name.required"
        >名前を入力してください</span
      >
      <span class="md-error md-primary" v-else-if="!$v.form.name.minlength"
        >名前は4文字以上で入力して下さい</span
      >
    </md-field>
  </div>
</form>

  methods: {
    getValidationClass(fieldName) {
      const field = this.$v.form[fieldName];
      if (field) {
        return {
          "md-invalid": field.$invalid && field.$dirty
        };
      }
    }
  },
  validateForm() {
    this.$v.$touch();
    if (!this.$v.$invalid) {
      this.submit();
    }
  },
  submit () {
    // Instead of this timeout, here you can call your API
    window.setTimeout(() => {
      this.lastUser = `${this.form.firstName} ${this.form.lastName}`
      this.userSaved = true
      this.sending = false
      this.clearForm()
    }, 1500)
  }

カテゴリ: Vue.js