フォームのバリデーションに関して、Vuetifyには多数の機能が組み込まれています。なお、サードパーティのバリデーションプラグインであるVee-validateやvuelidateも使用することができます。
内蔵された v-formコンポーネントにより、フォーム入力にバリデーションを簡単に追加できます。すべての入力コンポーネントには、関数の配列を受け取る rules propがあります。これらの関数を使用すると、フィールドが_valid_または_invalid_になる条件を指定できます。入力の値が変更されるたびに、配列内の各関数は新しい値を受け取ります。関数がfalseまたは文字列を返す場合、バリデーションは失敗しています。
以下に、簡単な例から複雑な例まで示します。
ルールを使用すると、すべてのフォーム コンポーネントにカスタムバリデーションを適用できます。これらは順次検証され、一度に 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 のテンプレートベースのバリデーションフレームワークです。ドキュメント