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

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

Vue.js

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

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

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

ex) バージョン2系

 

ex) バージョン3系

 

vee-validateのインストール

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

 

vee-validateの設定

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

・plugins/vee-validate.js

 

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

・nuxt.config.js

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

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

 

vee-validateによるバリデート

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

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

 

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

・ex) バリデート使用例

 

バリデーションルール

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

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

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

参考:Validation Rules

 

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