フォームバリデーション
BootstrapVueはデフォルトでフォームバリデーションを含んでいません。既存の多くのフォームバリデーションプラグインに委ねています。以下はプラグインの例と、それらを統合する方法の例です。
Vuelidate
Vuelidateは「Vue.js用のシンプルで軽量なモデルベースのバリデーション」を提供します。インストール手順およびその他のドキュメントは、ウェブサイトで確認できます。
Vuelidateの例
この例では、フォームの有効性に基づいて、異なるバリデーションとフィードバックを2つのフォームフィールドに追加する方法と、送信ボタンを動的に無効にする方法を示します。
これはBootstrapVueとVuelidateがどのように相互作用するかを示すように設計された詳細な例です。大規模なアプリケーションでは、標準のエラーメッセージコンポーネントを作成するなど、一部の機能を抽象化したいと思うでしょう。
VeeValidate v2
VeeValidateは、入力フィールドを検証し、エラーを表示するためのVue.js用のプラグインです。Vue I18nを完全にサポートしており、すぐに使える非常に優れたエラーメッセージを提供します。
重要
vee-validateのfieldsプロパティを構成する必要があります。そうしないと、<b-table>（およびおそらく他のコンポーネント）の:fieldsプロパティと競合します。
import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate, {
// This is the default
inject: true,
// Important to name this something other than 'fields'
fieldsBagName: 'veeFields',
// This is not required but avoids possible naming conflicts
errorBagName: 'veeErrors'
})VeeValidate v2の例
VeeValidate v3
VeeValidateは、入力フィールドを検証し、エラーを表示するためのVue.js用のプラグインです。Vue I18nを完全にサポートしており、すぐに使える非常に優れたエラーメッセージを提供します。