vee-validate.jsの使い方

インストール

$ yarn add vee-validate

有効化

vueで使えるようにします。

src/plugins/vee-validate.js

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Validator.localize('ja', ja)

Vue.use(VeeValidate, {
  locale: ja,
  dictionary: {}
})

localeをjaにすると、デフォルトエラーメッセージも日本語になります。

上記をmain.jsで読み込みます。

src/main.js

import './plugins/vee-validate'

使い方

ここに書いてあります。下記は新規登録画面のサンプルです。vuetifyを使っています。

<template>
  <v-content class="content_wrap">
    <v-container
      grid-list-lg
      style="max-width: 1200px;"
    >
      <h2 class="page-title text-xs-center">新規登録</h2>
      <v-layout row justify-center>
        <v-flex xs12 sm10 md6>
          <v-card class="pa-3">
            <form>
              <v-card-text>
                <v-text-field
                  v-model="email"
                  name="email"
                  label="メールアドレス"
                  data-vv-as="メールアドレス"
                  v-validate="'required|email'"
                  :error-messages="errors.collect('email')"
                  required
                ></v-text-field>
                <v-text-field
                  v-model="password"
                  name="password"
                  label="パスワード"
                  data-vv-as="パスワード"
                  messages="半角英小文字、大文字、数字をそれぞれ1種類以上含む、8～32文字で入力ください。"
                  v-validate="'required|min:8|max:32|password'"
                  :error-messages="errors.collect('password')"
                  required
                  type="password"
                  ref="password"
                  class="mt-3"
                ></v-text-field>
                <v-text-field
                  v-model="password2"
                  name="password2"
                  label="パスワード（確認）"
                  data-vv-as="パスワード"
                  v-validate="'required|confirmed:password'"
                  :error-messages="errors.collect('password2')"
                  required
                  type="password"
                  class="mt-3"
                ></v-text-field>
              </v-card-text>
              <v-card-actions>
                <v-btn
                  @click="submit"
                  :loading="loading"
                  color="primary"
                >
                  新規登録
                </v-btn>
              </v-card-actions>
            </form>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</template>

<script>
  export default {
    data: () => ({
      email: '',
      password: '',
      password2: '',
      loading: false
    }),
    methods: {
      async submit() {
        this.loading = true
        const result = await this.$validator.validateAll()
        if (!result) return this.loading = false
        this.send()
      },
      async send() {
        const data = {
          email: this.email,
          password: this.password
        }
        const result = await this.$store.dispatch('auth/register', data)
        if (result) {
          this.email = ''
          this.password = ''
          this.password2 = ''
          this.$router.push('login');
        }
        this.$validator.reset()
        this.loading = false
      }
    }
  }
</script>

パスワードの確認はこれを使ってます。「半角英小文字、大文字、数字をそれぞれ1種類以上含む」というのをpasswordという独自ルールで対応してます。

独自ルールの作り方

先程のvee-validate.jsに追記します。

src/plugins/vee-validate.js

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Validator.localize('ja', ja)
Validator.extend('doui', {
  getMessage: () => '同意してください',
  validate: value => !! value
})
Validator.extend('password', {
  getMessage: () => '半角英小文字、大文字、数字をそれぞれ1種類以上含めてください',
  validate: value => {
    if (! value.match(/\d/)) return false;
    if (! value.match(/[a-z]/)) return false;
    if (! value.match(/[A-Z]/)) return false;
    return true;
  }
})

Vue.use(VeeValidate, {
  locale: ja,
  dictionary: {}
})

Validator.extendというのを使うと、独自ルールが作れます。