バリデーションチェックに便利なVuelidateの使い方

Vueプロジェクトで入力フォームのバリデーションチェックをする際に便利なVuelidateというライブラリを見つけたので使ってみました。

＊参考

Vuelidate / 公式サイト

＊環境

macOS
Vuelidate v0.7.4

＊インストール

下記コマンドを実行してインストールします。

$ npm install vuelidate --save

vuelidateをインポートしてVueプロジェクトで使えるようにしておきます。
<src/main.js>

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

＊使い方

使用したいエラーチェックの種類をimportし、validationsオプションでチェック内容を設定します。今回は必須チェックと最大桁チェックを使いたいのでrequired, maxLengthをインポートしています。

$v.name.$errorで全てのエラーをチェックをすることができます。必須チェックのみなど個別でチェックしたい場合は$v.name.requiredなどとエラー名を指定します。
デフォルトでは文字の入力中にエラーチェックが実行されますが、this.$v.$touch()使うことでチェックするタイミングを自分の意図したタイミングに変えることができます。

<template>
  <div>
    <form v-if="!isConfirm">
      <span>お名前：</span>
      <input v-model.trim="name" type="text" @blur="$v.name.$touch" />
      <span v-if="$v.name.$error && !$v.name.required" style="color: red"
        >必須項目です</span
      >
      <span v-if="$v.name.$error && !$v.name.maxLength" style="color: red"
        >名前は{{
          $v.name.$params.maxLength.max
        }}文字以内で入力してください</span
      >
      <span>お知らせメール：</span>
      <input
        v-model="notice"
        type="radio"
        name="notice"
        value="受信する"
      />受信する
      <input
        v-model="notice"
        type="radio"
        name="notice"
        value="受信しない"
      />受信しない
      <input
        :disabled="$v.$invalid"
        type="button"
        value="確認画面へ進む"
        @click="confirm"
      />
    </form>
    <div v-if="isConfirm">
      <span>お名前：</span>
      <span>{{ name }}</span>
      <span>お知らせメール：</span>
      <span>{{ notice }}</span>
      <input type="button" value="登録" @click="register" />
      <input type="button" value="戻る" @click="backInput" />
    </div>
  </div>
</template>
<script>
import { required, maxLength } from 'vuelidate/lib/validators'
export default {
  validations: {
    name: {
      required,
      maxLength: maxLength(64)
    },
    notice: {
      required
    }
  },
  head() {
    return {
      title: '新規登録'
    }
  },
  data() {
    return {
      name: '',
      notice: '受信する',
      isConfirm: false
    }
  },
  methods: {
    confirm() {
      if (this.$v.$invalid) {
        this.$v.$touch()
      } else {
        this.isConfirm = true
      }
    },
    backInput() {
      this.isConfirm = false
    },
    async register() {
   // TODO
    }
  }
}
</script>
<style lang="postcss" scoped>
</style>

最大桁や最小桁の値を文字出力に使うことも可能です。
$v.{変数名}でアクセスし.$params.maxLength.maxとするとvalidationsで設定した値を使うことができます。

    signUp() {
      this.errors = []
      if (this.$v.$invalid) {
        if (!this.$v.email.required) {
          this.errors.push('メールアドレスは必須項目です。')
        }
        if (!this.$v.email.email) {
          this.errors.push('メールアドレスの形式ではありません。')
        }
        if (!this.$v.username.required) {
          this.errors.push('ユーザー名は必須項目です。')
        }
        if (!this.$v.username.maxLength) {
          this.errors.push(
            'ユーザー名は' +
              this.$v.username.$params.maxLength.max +
              '文字以内で入力してください。'
          )
        }
        if (!this.$v.password.required) {
          this.errors.push('パスワードは必須項目です。')
        }
        if (!this.$v.password.between) {
          this.errors.push(
            'パスワードは' +
              this.$v.password.$params.between.min +
              'から' +
              this.$v.password.$params.between.max +
              'の桁数で入力してください。'
          )
        }
        this.$v.$touch()
        return
      }

＊所感

今まで Vue でのバリデーションチェックにはVeeValidateを使っていて、世間でもこちらのほうが多く使われているようでしたが、今回使ったVuelidateで書くとtemplateに手を入れなくて済むので簡単に実装することができました。VeeValidateの実装が面倒だと感じているひとは、Vuelidateを使うことをオススメしたいです。

もぐもぐプログラミング

バリデーションチェックに便利なVuelidateの使い方

＊参考

＊環境

＊インストール

＊使い方

＊所感

人気の投稿