実施内容
Vue(TypeScript)でVeeValidateを使ったバリデーションを実施したメモです。Vuetifyを使っています。Vueは、Vue.extend方式を使っています。あまり詳しい説明は記載できていません。
動作環境
- Node.js v12.18.3
- npm 6.14.8
- vue-cli 4.5.6
- vue 2.6.12
- vuetify 2.2.11
使い方
インストール
npm install --save vee-validate
import
importVuefrom'vue';import{ValidationProvider,ValidationObserver,extend}from'vee-validate';import{required,email}from'vee-validate/dist/rules';| コンポーネント | 用途 |
|---|---|
| ValidationProvider | 指定項目でバリデーションを行う |
| ValidationObserver | 複数のバリデーションをグループ化する |
| extend | ルールを編集する |
ルールの指定
// 編集なし（デフォルトのルール・メッセージを使用extend('email',email);// デフォルトのメッセージを上書きextend('required',{...required,message:'{_field_}は必須項目です。'});{_field_}には、ValidationProviderのname要素が割り当てられる。
メッセージは、上記のように使うルールだけ日本語に書き換える方法と、デフォルトで全て日本語にする方法がある。日本語化については、こちら。
デフォルトのメッセージは、以下に記載されている。
英語→node_modules/vee-validate/dist/locale/en.json
componentsに登録
そのまま。
exportdefaultVue.extend({name:'Login',components:{ValidationProvider,ValidationObserver,},...v-text-fieldにバリデーションを追加
v-text-fieldをvalidation-providerで囲む。
<validation-providerv-slot="{ errors }"name="User ID"rules="required"><v-text-fieldprepend-icon="mdi-account-circle"label="User ID"v-model="user.userId":error-messages="errors"/></validation-provider>v-slotで、エラーメッセージなど様々な値を取得する。上記の例では、エラーメッセージを取得し、v-text-fieldのエラーメッセージに入力している。
ルールは複数指定可能。例 rules="required|email"
例
そのほかにv-slotで取得できる値はこちら。
バリデーションのグループ化
この場合、v-formをValidationObserverで囲む。
<ValidationObserverref="observer"v-slot="{ invalid }"><v-form><v-container><validation-providerv-slot="{ errors }"name="User ID"rules="required"><v-text-fieldprepend-icon="mdi-account-circle"label="User ID"v-model="user.userId":error-messages="errors"@input="input"/></validation-provider><validation-providerv-slot="{ errors }"name="Password"rules="required"><v-text-fieldprepend-icon="mdi-account-lock"type="password"label="Password"v-model="user.password":error-messages="errors"/></validation-provider></v-container></v-form><v-btntype="submit"@click="doLogin":loading="loading":disabled="invalid">ログイン<v-icon>mdi-login</v-icon></v-btn></ValidationObserver>この状態では、User IdとPassword二つのバリデーションをValidationObserverで確認する。ここでも、v-slotで、エラーメッセージなど様々な値を取得できる。上記の例では、invalidで二つのバリデーションが成功しているか確認し、ログインボタンの有効・無効を制御している（:disabled="invalid"の部分）。したがって、User IdとPassword両方を入力しないと、ボタンが有効化しない。
そのほかにv-slotで取得できる値はこちら。
$refsを使ったValidationObserverの制御（引っかかったところ）
vueのmethod内でバリデーションをリセットしたい時などに、$refsを利用してValidationObserver Compornent APIにアクセスすることが必要になる。ここで、Typescriptを使っていると記載方法に癖がある。
公式ドキュメントに記載している方法では、Vue.extendのパターンには合わなかったので、以下の方法で実施した。
...resetForm(){this.user.userId='';this.user.password='';(this.$refs.observerasInstanceType<typeofValidationObserver>).reset();},このように記載することで、reset（）を使えるようになる。
今回の例だと、
<ValidationObserverref="observer"v-slot="{ invalid }">で検出したバリデーションのエラーを
(this.$refs.observerasInstanceType<typeofValidationObserver>).reset();でリセットすることになる。
これに時間かかった、、、
日本語化
最後に、メッセージを全て日本語化する。
公式ドキュメント
まず、tsconfig.jsonを編集する。
{"compilerOptions":{//..."resolveJsonModule":true,"esModuleInterop":true//...}}importその2+
localizeと、日本語メッセージが含まれるja.jsonをimportする。また、localizeで日本語を有効化する。
// localize追加import{ValidationProvider,ValidationObserver,localize,extend}from'vee-validate';// 追加importjafrom'vee-validate/dist/locale/ja.json';localize('ja',ja);日本語のメッセージ一覧→vee-validate/dist/locale/ja.json
以上。