【VeeValidateの使い方】validation-provider/ボタンの無効化/JSに記述

vueのValidationについてまとめます。今のところVeeValidateを使っています。

vueのValidation(バリデーション)とは

【おすすめは？】VeeValidate(テンプレートベース)、vuelidate(モデルベース)、Vuetifyなどいろいろある

VeeValidate3の使い方(validation-providerなど)

公式サイト

VeeValidateはバージョンにより書き方が変わるため、注意しましょう。たまに違うマニュアルをみていたということがあります。。。

https://vee-validate.logaretm.com/v3/api/validation-provider.html

ボタンを無効化

名前を変更する編集機能を想定したサンプルコードです。プラグイン側で指定は必要です(インストールやプラグインの設定を紹介したサイトは、すでにたくさんあったため割愛)。

validation-observerでラップしslotプロパティでvalidに渡します。ボタンは:disabledで無効化します。

<validation-observer v-slot="{ invalid }">
  <div v-if="isEditName">
    <validation-provider
      v-slot="{ errors }"
      name="名前"
      rules="required"
    >
      <input v-model="name" type="text" />
      <p v-show="errors.length" style="color: #ca525c;">{{
        errors[0]
      }}</p>
    </validation-provider>
    <br />
    <button
      v-if="isEditName"
      class="edit-btn"
      :disabled="invalid"
      @click="save('flagName')"
    >
      セーブする
    </button>
    <button
      v-if="isEditName"
      class="edit-btn"
      :disabled="invalid"
      @click="cancel('flagName')"
    >
      キャンセル
    </button>
  </div>
</validation-observer>

文字色を変更する

文字色を変更する方法は、styleで設定すればいいだけです。赤っぽい色を割り当てることが多いでしょう。

<p v-show="errors.length" style="color: #ca525c;">{{
  errors[0]
}}</p>

無効化ボタンの色を変更する

ボタン無効化時の色を変更する方法です。:disabledでひっかけてあげます。cursorはボタンが押せないとわかるため、ui的に入れた方がよいでしょう。

:disabled {
  color: #fff;
  cursor: not-allowed;
  background-color: #434342;
}

:disable時のhoverを無効

:disableしてもhoverなどCSSのスタイルが適用されてしまいます。notで外してあげましょう。

.btn:hover:not([disabled]) {
}

urlのチェック

v3はなくなっているようですね。ライブラリの軽量化目的でしょうか。いわゆるhttpsのチェックは正規表現のregexでもチェックできますね。

最大文字数

文字数を制御するだけなら、普通にinputのmaxlengthもありますが、文字数オーバーにメッセージを表示させたいならVeeValidateのmaxがよさそうです。

<ValidationProvider v-slot="{ errors }" name="このメッセージボックス" rules="max:4">
  <input v-model="titleMes" type="text" />
  <span class="error-mes;">{{ errors[0] }}</span>
</ValidationProvider>

なお、似たものにmax_valueがありますが、数字用みたいです。

エラーメッセージが表示されるだけで、それ以上の文字を入力できるようです。ボタンを無効化するなどの対応は別途必要です。ボタンのValidationObserverの内側にValidationProviderをいれる形にし、slotプロパティにinvalidを渡します。

<ValidationObserver v-slot="{ invalid }">
  <ValidationProvider></ValidationProvider>
  <button :disabled="invalid"></button>
</ValidationObserver>

bails: falseは複数エラーを表示に

bails: falseにしないと、最初のエラーのみでチェックを止めてしまうようです。複数エラーを表示にしたい場合はfalse。

フォームの色をclassで切り替える(configure)

よくエラーがでたとき、inputらんが赤になる場合があります。

nuxtの場合、まずpluginに記述します。

import { configure } from 'vee-validate';

configure({
  classes: {
    valid: 'inputValid',
    invalid: 'inputInvalid'
  }
})

追加したclassをvueファイルに適当にかきます。

.inputValid {
  color: #593088;
  background-color: #c1a0e7;
  border-color: #c1a0e7;
}

.inputInvalid {
  color: #ca525c;
  background-color: #f8b8be;
  border-color: #f8b8be;
}

slotとclassをhtml側に追加します。

<ValidationProvider v-slot="{ errors, classes }" name="名前" rules="max:7">
  <input v-model="data" name="名前" type="text" :class="classes" />
  <span class="error-mes">{{ errors[0] }}</span>
</ValidationProvider>

公式リファレンスはこちらです。

あわせて読みたい

Validation State | VeeValidate Input validation for Vue.js

公式サイトを見る限り、Classesはお決まりなので、この名前は変えられません。

では、たとえばダークモードとライトモードの２種類の入力をける色が必要としましょう。その場合はcssの方で工夫してあげるしかなさそうです。

.light-box .inputInvalid {
  color: red;
}
.dark-box .inputInvalid {
  color: yellow;
}

javascrip側に記述

importしてリンク先の記述。

import { validate } from 'vee-validate'

https://vee-validate.logaretm.com/v3/api/validate.html

画像アップロードとサーバー（関係ない話）

<input type="file" @change="changeImg" />

VeeValidateと一緒に使われる画像アップロードの覚書です。

画像アップロードしたのち、保存せず戻るボタンを押しても画像は保存されているサービスばかりでした。保存していないのに保存されているとはなんでと細かいツッコミが入りそうですが、プレビューで画像を表示するためにサーバーにアップロードしているからです。当たり前といえば当たり前なのですけど。

fileはobjectなので、urlだけ抽出して保存する形ですかね。ごにょごにょしないといけず少々面倒です。

VeeValidate3のエラー

Uncaught (in promise) Error: No such validator ‘alpha_dash’ exists.

nuxtの場合、プラグインの設定が必要です。

vee-validate.esm.js:682 Uncaught (in promise) Error: No such validator 'alpha_dash' exists.

error Identifier ‘alpha_dash’ is not in camel case camelcase

alpha_dashはキャメルケースなのですよね。こちらはeslintの設定で回避した方がよさそう。

error  Identifier 'alpha_dash' is not in camel case  camelcase

alpha_dashやalpha_numは日本語対応していない

サービス登録時にマイページのurlを決める場合があります。noteやzennのようなサービスですね。その場合は英数字とハイフンとアンダースコアなので、alpha_dashが該当します。

しかし、試したらalpha_dashやalpha_numは日本語が禁止になっていないようです。。海外のライブラリは日本語が絡むものは要注意です。使えません。。。幸い、VeeValidateはregexがあるので正規表現で自力実装しました。

正規表現はこちら!

ebookbrain

正規表現のおすすめ本(入門書籍)!使い方Tipsまとめ! この記事では個人的によく使う正規表現のメモをまとめていきます。実用レシピとして少しづつ追加します。 テキストエディタの秀丸、Googleスプレッドシート、Javascript(Vu...

VeeValidate4

公式もみましたが、Vue3じゃないと使えないみたいです。

VeeValidate 4 (for Vue 3+) は試せてないですが、React Hook Form っぽいテイストでも書けるかもしれないですね。
Vue 2 だと VeeValidate 3 までしか使えないのがつらい🥺

— mascii (@mascii_k) July 7, 2021

vueの勉強方法

vueの勉強方法はこちらの記事にまとめてあります。

ithands(software)

【udemyで大人買い】vue.js/vuetify/nuxt/firebaseのおすすめ入門本/動画 vue.js、vuex、nuxt、firebaseの入門本や動画でおすすめはどれでしょう。 現在、個人的にnuxt.jsで個人開発をしています。若干、個人的な覚書もかねているためお役立ち記事...

ご参考になれば幸いです。