tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

NuxtJSでVeeValidate 3.x系を使う

f:id:tekitoumemo:20200105175103p:plain

前回の記事で書いたプロフィールサイトでお問い合わせ画面を作ってます。
どうせ作るんならフォームバリデーションを追加してみることにします。なのでVeeValidateを使ってみます。
tekitoumemo.hatenablog.com


Nuxtの設定は以下をほぼパクリました設定から「こんぐらい使えれば一通り大丈夫だよね」ってところまで書きます。
Available Rules | VeeValidate

設定

pluginsに以下作成
plugins/vee-validate.js

import { extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

// No message specified.
extend('email', email)

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
})

nuxt.config.jsに以下追加

  plugins: ['~/plugins/vee-validate.js'],

で起動すると以下のエラー
f:id:tekitoumemo:20200105181410p:plain
これはvee-validate/dist/rulesがES6なのでBabel で変換しないといけません。
なのでbuild. transpileに以下を追加します。

build: {
    transpile: ['vee-validate/dist/rules'],

    extend(config, ctx) {}
    ...
  }

これでVeeValidateの準備が出来ました。

あとはこんな感じ(いきなり雑)

<ValidationProvider v-slot="{ errors }"  rules="required">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
import { ValidationProvider } from 'vee-validate'

export default {
  components: {
    ValidationProvider
  },
}

こんな感じになります。
f:id:tekitoumemo:20200105205042p:plain

emailなど、空白+アドレスの形式確認みたいな複数条件の場合はパイプでつなげばどちらのバリデーションが有効になります。
rules="required|email"

独自のエラーメッセージを入力したい場合は{_field_}プレースホルダーを使います。

// Override the default message.
extend('required', {
  ...required,
  message: '{_field_}は必須項目です。'
})

こんな感じになります。
f:id:tekitoumemo:20200105210543p:plain

カスタムバリデーション

カスタムバリデーションに引数を渡すことも可能です。rules="max:10"は10文字以上入力された場合、エラーにします。

extend('max', {
  validate: (value, args) => {
    return value.length <= args.length
  },
  message: '{_field_}長すぎやろ',
  params: ['length']
})

どれか1つでもエラーの場合はボタンをdisableにする

ValidationObserverを使います。invalidはどれか1つでも無効の場合にtrueになります。いろいろあるのでここ参考に

<ValidationObserver v-slot="{ invalid }" slim>
    <ValidationProvider
              v-slot="{ errors }"
              name="メールアドレス"
              rules="required|email"
            >
    </ValidationProvider>
    ....
</ValidationObserver>

ここまでできればformについては大体まかなえそう。

まとめ

Angularはreactive-formsがあるからform強いなーと思ってたけど、VeeValidate相当使いやすい。2系は設定がちょっとだるいらしいのでシンプルでよかった。