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

プログラミング学習

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

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

  • いろいろな業界で使われる言葉ですが、意味は検証。プログラミングの場合はそのまんまですね。
  • vueの場合は、フォームで入力したらここ正しく入力してよ。とかだすのですね。
スポンサーリンク

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

  • プラグインを使うなら、VeeValidate(テンプレートベース)、vuelidate(モデルベース)、独自実装の3種類の方法があります。
  • そのほかにVuetifyについてるバリデーションもありますが、専用ではないため簡易的なものという位置付けでしょう。個人的には使いません
  • 好みが分かれそうですが、人気なのはVeeValidate。。テンプレートベースはHtml側に記述します。Script側に記述することもできるようです。
  • VeeValidateはv2とv3は文法が違うためv3の情報をみましょう。
  • nuxtでも問題なく利用できます。
  • VeeValidateはバグが少なく、Validationの種類が多いことが特徴です。画像などのバリデーションはVeeValidateしかありません。
スポンサーリンク

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

公式サイト

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

Validation Provider | VeeValidate
Input validation for Vue.js

ボタンを無効化

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

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はなくなっているようですね。ライブラリの軽量化目的でしょうか。正規表現の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>
maxlengthもVeeValidateも全角、半角いずれも1文字としてカウントされるようです。日本語と英語の判別はできないということです。日本のものではないので当たり前かもですが…。

なお、似たものに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>

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

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

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

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

javascrip側に記述

importしてリンク先の記述。

import { validate } from 'vee-validate'
validate() | VeeValidate
Input validation for Vue.js
スポンサーリンク

vueの勉強方法

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

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

コメント

タイトルとURLをコピーしました