【Nuxt.js】vee-validateでバリデーションを実装する方法

vee-validateというライブラリでNuxt.jsにバリデーションを実装する方法をメモしておきます。

バージョン2系からバージョン3系への仕様変更
vee-validateのインストール
vee-validateの設定
vee-validateによるバリデート
バリデーションルール

バージョン2系からバージョン3系への仕様変更

2019/8のバージョン3系への更新によって大規模な仕様変更が生じたため、それまでv-validate ディレクティブを用いていましたが、バージョン3系ではValidationProviderを使うようになっています。

ex) バージョン2系

1	<input name="name" type="text" v-validate="'required'">

ex) バージョン3系

</ValidationProvider>

vee-validateのインストール

今回はバージョン2系をインストールします。

1	$ npm i vee-validate@2.2.15 -save

vee-validateの設定

pluginsディレクトリ配下にvee-validate.jsファイルを作成します。vee-validate/dist/locale/jaを読み込むことで、エラーメッセージの日本語化をします。

・plugins/vee-validate.js

import Vue from 'vue'

import VeeValidate, { Validator } from 'vee-validate'

import ja from 'vee-validate/dist/locale/ja'

Vue.use(VeeValidate)

Validator.localize('ja', ja)

nuxt.config.jsのpluginsにvee-validateを追加します。

・nuxt.config.js

plugins: [

...

{ src: '~/plugins/vee-validate', ssr: true }

...

ちなみにssrをfalseにすると、以下のエラーが発生します。

バリデート自体はSSR時に必要ないのだが、tmplateがレンダリングしようとするため、errorsのhasが読み込めないということになります。

1	ERROR [Vue warn]: Error in render: "TypeError: Cannot read property 'has' of undefined"

vee-validateによるバリデート

実際にバリデート処理を実装してみます。バリデートしたいinputタグにv-validateを追加し、バリデーションルールを指定します。

バリデーションルールに反していた場合、v-show=”errors.has(‘name’)”がtrueとなり、エラーメッセージが表示されます。

<input

:name="'name'"

:placeholder="'名前'"

v-validate="'required'"

data-vv-as="名前"

<p class="alert alert-danger">{{ errors.first('name') }}</p>

</div>

</form>

登録ボタンを押した際にバリデートをかけるには以下のように実装します。バリデーションルールに則っていた場合のみ、登録処理を実行すことができます。

methods: {

this.$validator.validateAll().then((result) => {

if (result) {

this.$store.dispatch(test/register, { name: this.name })

}

})

}

・ex) バリデート使用例

バリデーションルール

主なバリデーションのルールとして以下のルールがあります。

required : 入力必須
email : メールアドレス形式
numeric : 半角数値のみ
min : 最小入力文字数
max : 最大入力文字数

詳しくはこちらの公式ページに全てのバリデーションルールが記載されています。

参考：Validation Rules

以上、vee-validateというライブラリでNuxt.jsにバリデーションを実装する方法でした。