【Vue.js】VeeValidate v3.x の導入および使用例
追記
一休さんにて、実際にv2→v3にバージョンアップされた際の記事を出されました。
マイグレーションガイドとIssueを深掘り、詳しく書かれているので、目を通すことをお勧めします。
とある仕事でVeeValidateという、Vue.js用バリデーション系のライブラリを使っていて、
今度v2.x→v3.xのバージョンアップを行います。
この記事では、VeeValidate v3における導入方法・使用例をメモとして書き残しておきます。
導入方法
以下記事・試したリポジトリを元に導入手順を記載します。
- 記事
- リポジトリ
# インストール npm i vee-validate
import Vue from 'vue' import { ValidationObserver, ValidationProvider, extend } from 'vee-validate' // ルールの追加 extend('required', { validate(value) { return { required: true, valid: ['', null, undefined].indexOf(value) === -1 } }, computesRequired: true }) // コンポーネントの登録 Vue.component('ValidationObserver', ValidationObserver) Vue.component('ValidationProvider', ValidationProvider)
ルールは必要に応じて追加します。
使用例
<template> <validation-observer v-slot="{ handleSubmit }"> <form @submit.prevent="handleSubmit(submit)"> <validation-provider name="email" rules="required" v-slot="{ errors }"> <!-- vue-materialのmd-field --> <md-field :class="mdFieldClass(errors)" ><label>Vee-Validate Required</label> <md-input name="email" v-model="field.email" required></md-input> <!-- バリデーションエラー時のメッセージ表示 --> <span class="md-error">{{ errors[0] }}</span> </md-field> </validation-provider> </form> </validation-observer> </template> <script> export default { data() { return { field: { email: '' } } }, methods: { submit() {}, mdFieldClass(errors) { // vue-materialのバリデーションエラー時のクラスを付加 return { 'md-invalid': errors.length > 0 } } } } </script>
以下のようなお作法で使用します。
<validation-provider>
を定義name
には項目名を指定rules
にはextend
で定義したルール名を指定
- バリデーションチェックをしたい要素に対し、
<validation-provider>
のname
属性と同じ値を指定 - エラーメッセージを表示する要素には
errors
の値を使用するerrors
にはエラーメッセージが定義される
v2.x→v3.x のマイグレーション方法
公式で以下記事にまとめてくれています。(ありがたい)
v3.xではv-validate
を削除、
<validation-provider>
にバリデーションのルールを定義するような形になっています。
上記記事を元にマイグレーションを進めたいと思います。
おわり
以上になります。
気になる点等ありましたら、フィードバックいただけると助かります。🙏