【Nuxt.js】vee-validate を使って、フォームのバリデーション実装をする

概要

• vee-validateライブラリを使って、フォームのバリデーション実装をする
• vee-validateは以下を参照にインストール
  • VeeValidate

実際に書いたコード

• vee-validate.jsに設定を記載

vee-validate.js

import Vue from "vue"
// 使用する機能
import {
  ValidationProvider,
  ValidationObserver,
  localize,
  extend
} from "vee-validate"

// エラーメッセージの日本語化用
import ja from "vee-validate/dist/locale/ja.json"

// 使用するvalidate rule
import { required, max, email, numeric, regex } from "vee-validate/dist/rules"
extend("required", required)
extend("email", email)
extend("max", max)
extend("numeric", numeric)
extend("regex", regex)

Vue.component("ValidationProvider", ValidationProvider)
Vue.component("ValidationObserver", ValidationObserver)
localize("ja", ja)

• フォームのinputタグをvalidation-providerタグで囲う
• rulesプロパティをrequiredとすると入力必須項目となる（vee-validate.jsで設定）

components/Name.vue

<template>
  <section>
    <label>名前</label>
    <validation-provider
      v-slot="{ errors }"
      rules="required"
      name="名前"
    >
      <b-form-input type="text" v-model="name"></b-form-input>
      <p v-show="errors.length" class="error_message">
        {{ errors[0] }}
      </p>
    </validation-provider>
  </section>
</template>

• フォーム全体をvalidation-observerタグで囲う
• 設定したrulesが全て満たされていないとボタンが無効化（disabled）のままとなる
• コンポーネント側で入力された値を親であるpagesに渡しています
  • 子Componentで変更されたv-modelの値を親に反映する 参照

index.vue

<template>
  <b-container>
    <validation-observer v-slot="{ invalid }">
      <div class="form">
        <Name v-model="form_name"></Name>
        <NoticeEmail v-model="notice_email"></NoticeEmail>
      </div>
      <div class="btn">
        <button @click="submit" :disabled="invalid">送信</button>
        <p v-show="invalid">
          必須項目は全て入力してください
        </p>
      </div>
    </validation-observer>
  </b-container>
</template>

<script>
import Name from "~/components/Name.vue"
import Email from "~/components/Email.vue"
import axios from "axios"

export default {
  components: {
    Name,
    Email,
  },
  data() {
    return {
      name: "",
      email: ""
    }
  },
  methods: {
    submit() {
      const data = {
        name: this.name,
        email: this.email,
      }
      axios
        .post(api_path, data)
        .then(res => {
          // 処理
        })
        .catch(e => {
          // 処理
        })
    }
  }
}
</script>

### 参照
- [Nuxt.jsでバリデーションするためにVeeValidateを使う](https://www.virment.com/how-to-use-veevalidate-nuxtjs/)