Vuetify

ショップ

企業向け

フォームのバリデーションに関して、Vuetifyには多数の機能が組み込まれています。なお、サードパーティのバリデーションプラグインであるVee-validatevuelidateも使用することができます。

内蔵された v-formコンポーネントにより、フォーム入力にバリデーションを簡単に追加できます。すべての入力コンポーネントには、関数の配列を受け取る rules propがあります。これらの関数を使用すると、フィールドが_valid_または_invalid_になる条件を指定できます。入力の値が変更されるたびに、配列内の各関数は新しい値を受け取ります。関数がfalseまたは文字列を返す場合、バリデーションは失敗しています。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

ルールを使用すると、すべてのフォーム コンポーネントにカスタムバリデーションを適用できます。これらは順次検証され、一度に 1 エラーの maximum が表示されるので、それに応じてルールを並べてください。

v-form コンポーネントには、コンポーネントに ref を設定することでアクセスできる 3つの関数 があります。 refを使用すると、コンポーネントの内部メソッドにアクセスできます。たとえば、 <v-form ref="form">です。 this.$refs.form.validate() はすべての入力をバリデーションし、それらがすべて有効かどうかを返します。 this.$refs.form.reset() はすべての入力をクリアし、バリデーションエラーをリセットします。 this.$refs.form.resetValidation()は入力バリデーションのみをリセットし、状態を変更しません。

vuelidate は Vue.js のシンプルで軽量なモデル ベースのバリデーションです。ドキュメント

vee-validate は Vue.js のテンプレートベースのバリデーションフレームワークです。ドキュメント

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!