# Forms

フォームバリデーションに関して、Vuetifyには多くの統合機能と組み込み機能があります。サードパーティの検証プラグインを使用したいですか？すぐに Vee-validateとvuelidateを使用することができます。

# 使い方

v-form コンポーネントにより、入力フォームにバリデーションを簡単に追加できます。すべての入力コンポーネントには、function, boolean, stringの型の混合配列を受け付けるrules propがあります。これにより、入力が有効または無効となる条件を指定できます。入力の値が変更されるたびに、配列内の各関数は新しい値を受け取り、各配列要素が評価されます。関数または配列要素が false または string を返した場合は、バリデーションに失敗したことになり、stringの値がエラーメッセージとして表示されます。

# API

v-form

# サンプル

# Props

# Rules

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

# その他

# submit & clearでのバリデーション

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

# Vee-validate

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

# Vuelidate

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

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーションリンクでページ間を移動できます。

GitHub でこのページを編集する

最終更新日:03/12/2025, 5:21:30 PM