vee-validateというライブラリでNuxt.jsにバリデーションを実装する方法をメモしておきます。
バージョン2系からバージョン3系への仕様変更
2019/8のバージョン3系への更新によって大規模な仕様変更が生じたため、それまでv-validate ディレクティブを用いていましたが、バージョン3系ではValidationProviderを使うようになっています。
ex) バージョン2系
1 | <input name="name" type="text" v-validate="'required'"> |
ex) バージョン3系
1 2 3 | <ValidationProvider rules="required" v-slot="{ errors }"> <input type="text" v-model="name"> </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
1 2 3 4 5 6 | 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
1 2 3 4 5 | 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となり、エラーメッセージが表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 | <form @submit.prevent="register"> <input :name="'name'" :placeholder="'名前'" v-validate="'required'" data-vv-as="名前" /> <div class="form-control-feedback" v-show="errors.has('name')"> <p class="alert alert-danger">{{ errors.first('name') }}</p> </div> <button type="submit">登録</button> </form> |
登録ボタンを押した際にバリデートをかけるには以下のように実装します。バリデーションルールに則っていた場合のみ、登録処理を実行すことができます。
1 2 3 4 5 6 7 8 9 | methods: { register () { this.$validator.validateAll().then((result) => { if (result) { this.$store.dispatch(test/register, { name: this.name }) } }) } } |
・ex) バリデート使用例
バリデーションルール
主なバリデーションのルールとして以下のルールがあります。
- required : 入力必須
- email : メールアドレス形式
- numeric : 半角数値のみ
- min : 最小入力文字数
- max : 最大入力文字数
詳しくはこちらの公式ページに全てのバリデーションルールが記載されています。
以上、vee-validateというライブラリでNuxt.jsにバリデーションを実装する方法でした。