【VeeValidateの使い方】ボタンの無効化/bails: falseは複数対策/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の使い方

公式サイト

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がよさそうです。そのままだと日本語も英語も1文字とカウントされるようです。

<ValidationProvider v-slot="{ errors }" name="このメッセージボックス" rules="max:4">
  <input v-model="titleMes" type="text" />
  <span style="color: #ca525c;">{{ 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。

javascrip側に記述

importしてリンク先の記述。

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

vueの勉強方法

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

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

コメント

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