Form フォーム - Vant 4

📋 Form フォーム

📝 紹介

Form フォームは親切なデータ管理アシスタントのようなもので、ユーザーからの様々な情報を収集・整理する専門家です！🏠 様々な入力コントロールを優雅に表示するだけでなく、厳密なリアルタイム検証機能を備えており、すべてのデータが要件を満たしていることを確保します。

シンプルなテキスト入力から複雑なファイルアップロード、単一選択・複数選択から日付選択まで、Form フォームはあらゆる場面で優れたパフォーマンスを発揮します。まるで万能の整理箱のように、入力ボックス、ラジオボタン、チェックボックス、スライダー、レーティングなどの様々なコンポーネントを完璧にまとめることができます！✨

最も素晴らしいのは、Field 入力フィールドコンポーネントとの相性が抜群で、両者が見事に連携してデータ収集を簡単かつ効率的にしてくれることです。ユーザー登録、情報入力、複雑な業務フォームなど、あらゆる場面で Form はすべてを秩序正しく管理します！

💡 ヒント：Form フォームは指揮者のように、様々なフォームコンポーネントを調和よく演奏させます！

📦 導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネント登録を参照してください。

import { createApp } from'vue'; 
import { Form, Field, CellGroup } from'vant'; 
const app = createApp(); 
app.use(Form); 
app.use(Field); 
app.use(CellGroup);

🎯 コードデモ

🚀 基本的な使い方

最もシンプルなものから始めましょう！🌟 Form フォームの世界では、各 Field コンポーネントは勤勉な労働者のように、特定のデータを収集する役割を果たします。Field の rules 属性を使用すると、各労働者に仕事のルール（検証ルール）を設定することができます。

数行のシンプルなコードで、機能が完全で見栄えのよいフォームを構築できます！まるでブロックを組み立てるように簡単で楽しいです！🧱

html

import { ref } from'vue'; 
export default { 
    setup() { 
        const username = ref(''); 
        const password = ref(''); 
        const onSubmit = (values) => { 
            console.log('submit', values); 
        }; 
        return { username, password, onSubmit, 
            rules: {
                username: [{ required: true, message: 'ユーザー名を入力してください' }],
                password: [{ required: true, message: 'パスワードを入力してください' }],
            },
        }; 
    }, 
};

🔍 検証ルール

Form フォームの検証システムは厳格だけど公正な先生のようなものです！👩‍🏫 rules 属性を通じて、各フォーム項目に様々な検証ルールを設定することができます。必須チェックから形式検証、同期検証から非同期検証まで、あらゆるニーズに応えます。

シンプルな空欄チェックから複雑な正規表現マッチング、さらにはサーバー検証が必要な非同期検証まで、Form はあらゆる検証を簡単に処理します。データ検証を厳密かつ優雅に行うことができます！✨

html

import { ref } from'vue'; 
import { closeToast, showLoadingToast } from'vant'; 
export default { 
    setup() { 
        const value1 = ref(''); 
        const value2 = ref(''); 
        const value3 = ref('abc'); 
        const value4 = ref(''); 
        const pattern = /\d{6}/; 
        // 校验函数返回 true 表示校验通过，false 表示不通过
        const validator = (val) => /1\d{10}/.test(val); // 校验函数可以直接返回一段错误提示
        const validatorMessage = (val) => `${val} 不合法，请重新输入`; 
        // 校验函数可以返回 Promise，实现异步校验
        const asyncValidator = (val) => newPromise((resolve) => { showLoadingToast('验证中...'); setTimeout(() => { 
            closeToast(); 
            resolve(val === '1234'); 
        }, 1000); }); 
        const onFailed = (errorInfo) => { 
            console.log('failed', errorInfo); 
        }; 
        return { value1, value2, value3, value4, pattern, onFailed, validator, asyncValidator, }; 
    }, 
};

🎛️ フォーム項目タイプ - スイッチ

シンプルで優雅なスイッチコントロールが必要ですか？Switch コンポーネントは精巧な電灯スイッチのようで、軽く切り替えるだけで状態を変更できます！様々なスイッチ設定シーンに最適です。

html

import { ref } from'vue'; export default { setup() { const checked = ref(false); return { checked }; }, };

☑️ フォーム項目タイプ - チェックボックス

複数選択問題の最適な相棒！Checkbox コンポーネントは親切な買い物リストのようで、ユーザーは自由に複数のオプションをチェックできます。趣味の選択から機能権限の設定まで、あらゆる場面で活躍します！

html

import { ref } from'vue'; export default { setup() { const checked = ref(false); const groupChecked = ref([]); return { checked, groupChecked, }; }, };

🔘 フォーム項目タイプ - ラジオボタン

選択障害の救世主！Radio コンポーネントは優しいガイドのようで、ユーザーが複数のオプションの中から唯一の選択をするのを支援します。シンプルで明確、一目瞭然です！

html

import { ref } from'vue'; export default { setup() { const checked = ref('1'); return { checked }; }, };

🔢 フォーム項目タイプ - ステッパー

数値入力の精密コントローラー！Stepper コンポーネントは親切なカウンターのようで、ユーザーはボタンをクリックするだけで簡単に数値を調整できます。ショッピングカートの数量、年齢選択など、正確にコントロールできます！

html

import { ref } from'vue'; export default { setup() { const value = ref(1); return { value }; }, };

⭐ フォーム項目タイプ - レーティング

ユーザーの満足度を輝かせましょう！Rate コンポーネントは星空評価師のようで、ユーザーは星をクリックして自分の評価を表現することができます。直感的で生き生きとしていて、一目でわかります！

html

import { ref } from'vue'; export default { setup() { const value = ref(3); return { value }; }, };

🎚️ フォーム項目タイプ - スライダー

スムーズな数値調整体験！Slider コンポーネントは優雅な調整卓のようで、ユーザーはスライダーをドラッグして数値を精密に調整できます。音量コントロール、価格フィルタリングなど、スムーズに操作できます！

html

import { ref } from'vue'; export default { setup() { const value = ref(50); return { value }; }, };

📁 フォーム項目タイプ - ファイルアップロード

ファイルアップロードを簡単かつ楽しく！Uploader コンポーネントは親切なファイル管理アシスタントのようで、画像プレビュー、進捗表示、複数ファイルアップロードをサポートします。ドラッグアップロード、ワンクリックで完了！

html

import { ref } from'vue'; export default { setup() { const value = ref([ { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }, ]); return { value }; }, };

🎯 フォーム項目タイプ - ピッカー

膨大なオプションのスマートマネージャー！Picker コンポーネントは回転する万華鏡のようで、ユーザーはたくさんのオプションの中から簡単に気に入ったものを見つけることができます。都市選択、職業選択など、回して簡単に完了！

html

import { ref } from'vue'; export default { setup() { const result = ref(''); const pickerValue = ref([]); const showPicker = ref(false); const columns = [ { text: '杭州', value: 'Hangzhou' }, { text: '宁波', value: 'Ningbo' }, { text: '温州', value: 'Wenzhou' }, { text: '绍兴', value: 'Shaoxing' }, { text: '湖州', value: 'Huzhou' }, ]; constonConfirm = ({ selectedValues, selectedOptions }) => { result.value = selectedOptions[0]?.text; pickerValue.value = selectedValues; showPicker.value = false; }; return { result, pickerValue, columns, onConfirm, showPicker, }; }, };

📅 フォーム項目タイプ - 日付ピッカー

時間旅行の精密なナビゲーション！DatePicker コンポーネントはタイムマシンのようで、ユーザーは年月日の間を簡単に往来できます。誕生日選択、予約時間など、スクロールして簡単に完了！

html

import { ref } from'vue'; export default { setup() { const result = ref(''); const showPicker = ref(false); const pickerValue = ref([]); const onConfirm = ({ selectedValues }) => { result.value = selectedValues.join('/'); pickerValue.value = selectedValues; showPicker.value = false; }; return { result, pickerValue, onConfirm, showPicker, }; }, };

🗺️ フォーム項目タイプ - 地域選択器

地理的位置のスマートガイド！Area コンポーネントは親切な地図アシスタントのようで、ユーザーが具体的な地域を素早く特定するのを支援します。住所入力、配送範囲など、段階的に進み、精密な位置特定が可能です！

html

import { ref } from'vue'; import { areaList } from'@vant/area-data'; export default { setup() { const result = ref(''); const showArea = ref(false); const pickerValue = ref(''); const onConfirm = ({ selectedValues, selectedOptions }) => { pickerValue.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : ''; showArea.value = false; result.value = selectedOptions.map((item) => item.text).join('/'); }; return { result, areaList, pickerValue, showArea, onConfirm, }; }, };

📆 フォーム項目タイプ - カレンダー

直感的な日付選択体験！Calendar コンポーネントは美しいデスクトップカレンダーのようで、ユーザーは直感的に日付を閲覧・選択できます。休日のスケジュール、イベント予約など、一目でわかります！

html

import { ref } from'vue'; export default { setup() { const result = ref(''); const showCalendar = ref(false); const onConfirm = (date) => { result.value = `${date.getMonth() + 1}/${date.getDate()}`; showCalendar.value = false; }; return { result, onConfirm, showCalendar, }; }, };

API

Props

パラメータ	説明	型	デフォルト値
label-width	フォーム項目の label 幅、デフォルトの単位は`px`	*number	string*
label-align	フォーム項目の label の配置方法、オプションは center``right``top	string	`left`
input-align	入力ボックスの配置方法、オプションは center``right	string	`left`
error-message-align	エラーメッセージの配置方法、オプションは center``right	string	`left`
validate-trigger	フォーム検証のトリガータイミング、オプションは `onChange`、`onSubmit`、配列で複数の値を同時に設定できる、詳細な使い方は下の表を参照	*string	string[]*
colon	label の後ろにコロンを追加するかどうか	boolean	`false`
disabled	フォーム内のすべての入力ボックスを無効にするかどうか	boolean	`false`
readonly	フォーム内のすべての入力ボックスを読み取り専用にするかどうか	boolean	`false`
required `v4.7.3`	フォームの必須アスタリスクを表示するかどうか	*boolean	'auto'*
validate-first	ある項目の検証に失敗した場合に検証を停止するかどうか	boolean	`false`
scroll-to-error	フォームを送信し、検証に失敗した場合にエラーのフォーム項目までスクロールするかどうか	boolean	`false`
scroll-to-error-position `v4.9.2`	エラーのフォーム項目までスクロールする際の位置、オプションは `center`	`end`	`nearest`
show-error	検証に失敗した場合に入力ボックスを赤く表示するかどうか	boolean	`false`
show-error-message	検証に失敗した場合に入力ボックスの下にエラーメッセージを表示するかどうか	boolean	`true`
submit-on-enter	Enterキーを押したときにフォームを送信するかどうか	boolean	`true`

フォーム項目の API については：Field コンポーネントを参照してください

Rule データ構造

Field の rules 属性を使用して検証ルールを定義できます。オプションのプロパティは以下の通りです:

キー名	説明	型
required	必須フィールドかどうか、値が空の場合（空文字列、空配列、`false`、`undefined`、`null`）は検証に失敗します	boolean
message	エラーメッセージ、動的なメッセージを返すために関数に設定することもできます	*string
validator	関数を通じて検証し、非同期検証のために Promise を返すことができます	*(value, rule) => boolean
pattern	正規表現を通じて検証し、正規表現に一致しない場合は検証に失敗します	RegExp
trigger	このルールのトリガータイミングを設定し、Form コンポーネントの `validate-trigger` 属性よりも優先されます、オプションは `onChange`、`onBlur`、`onSubmit`	*string
formatter	フォーマット関数、フォーム項目の値を変換して検証します	(value, rule) => any
validateEmpty	`validator` と `pattern` が空の値を検証するかどうかを設定します、デフォルトは `true`、`false` に設定してこの動作を無効にすることができます	boolean

validate-trigger オプションの値

validate-trigger 属性を通じて、フォーム検証のトリガータイミングをカスタマイズできます。

値	説明
onSubmit	フォームを送信したときのみ検証をトリガーします
onBlur	フォームの送信時と入力ボックスがフォーカスを失ったときに検証をトリガーします
onChange	フォームの送信時と入力ボックスの内容が変更されたときに検証をトリガーします

イベント

イベント名	説明	コールバックパラメータ
submit	フォームを送信し、検証に合格した後にトリガーされます	values: object
failed	フォームを送信し、検証に失敗した後にトリガーされます	errorInfo: { values: object, errors: object[] }

メソッド

ref を通じて Form インスタンスを取得し、インスタンスメソッドを呼び出すことができます。詳細はコンポーネントインスタンスメソッドを参照してください。

メソッド名	説明	パラメータ	戻り値
submit	フォームを送信し、送信ボタンをクリックするのと同じ効果です	-	-
getValues	すべてのフォーム項目の現在の値を取得します	-	Record<string, unknown>
validate	フォームを検証し、単一または一部のフォーム項目を検証するために1つまたは複数の `name` を渡すことができます、`name` を渡さない場合、すべてのフォーム項目が検証されます	*name?: string	string[]*
resetValidation	フォーム項目の検証メッセージをリセットし、単一または一部のフォーム項目をリセットするために1つまたは複数の `name` を渡すことができます、`name` を渡さない場合、すべてのフォーム項目がリセットされます	*name?: string	string[]*
getValidationStatus	すべてのフォーム項目の検証ステータスを取得します、ステータスには `passed`、`failed`、`unvalidated` が含まれます	-	Record<string, FieldValidationStatus>
scrollToField	対応するフォーム項目の位置までスクロールします、デフォルトは上部までスクロールします、2番目のパラメータに false を渡すと下部までスクロールできます	name: string, alignToTop: boolean	-

型定義

コンポーネントは以下の型定義をエクスポートします：

import type { FormProps, FormInstance } from'vant';

FormInstance 是组件实例的类型，用法如下：

import { ref } from'vue'; import type { FormInstance } from'vant'; const formRef = ref<FormInstance>(); formRef.value?.submit();

スロット

名前	説明
default	フォームの内容

❓ よくある質問

🎨 フォーム項目をカスタマイズするには？

ユニークなフォーム項目を作成したいですか？問題ありません！🌟 Vant はオープンな創作プラットフォームのようで、Form コンポーネントにカスタムフォーム項目を挿入することを完全にサポートしています。

useCustomFieldValue という不思議なツールを通じて、どんなカスタムコンポーネントでも Form フォームの検証システムに完璧に統合することができます。まるであなたの創造性に翼を与え、フォームの世界で自由に飛び回ることができるようになります！✨

📚 関連文書

Form フォームはこれらのコンポーネントと組み合わせて使用することで、より豊富なデータ収集体験を提供できます：

Field 入力フィールド - Form フォームの最良の相棒、あらゆる入力シーンの万能選手 📝
Button ボタン - フォーム送信のトリガー、操作をより明確に 🔘
Cell セル - フォーム項目の優雅なコンテナ、レイアウトをより整然と 📋
CellGroup セルグループ - フォーム項目のグループ管理、構造をより明確に 📦
Switch スイッチ - シンプルなスイッチコントロールコンポーネント 🎛️
Checkbox チェックボックス - 複数選択シーンの完璧なソリューション ☑️
Radio ラジオボタン - 単一選択シーンの優雅な選択 🔘
Stepper ステッパー - 数値入力の精密コントロール 🔢
Rate レーティング - ユーザー評価の星表示 ⭐
Slider スライダー - 数値調整のスムーズな体験 🎚️
Uploader ファイルアップロード - ファイルアップロードの親切な管理アシスタント 📁
Picker ピッカー - 膨大なオプションのスマート管理 🎯
DatePicker 日付ピッカー - 時間選択の精密なナビゲーション 📅
Area 地域選択器 - 地理的位置のスマートガイド 🗺️
Calendar カレンダー - 直感的な日付選択体験 📆
Highlight テキストハイライト - キーワードマーキングの専門ツール 🔍

📋 Form フォーム ​

📝 紹介 ​

📦 導入 ​

🎯 コードデモ ​

🚀 基本的な使い方 ​

🔍 検証ルール ​

🎛️ フォーム項目タイプ - スイッチ ​

☑️ フォーム項目タイプ - チェックボックス ​

🔘 フォーム項目タイプ - ラジオボタン ​

🔢 フォーム項目タイプ - ステッパー ​

⭐ フォーム項目タイプ - レーティング ​

🎚️ フォーム項目タイプ - スライダー ​

📁 フォーム項目タイプ - ファイルアップロード ​

🎯 フォーム項目タイプ - ピッカー ​

📅 フォーム項目タイプ - 日付ピッカー ​

🗺️ フォーム項目タイプ - 地域選択器 ​

📆 フォーム項目タイプ - カレンダー ​

API ​

Props ​

Rule データ構造 ​

validate-trigger オプションの値 ​

イベント ​

メソッド ​

型定義 ​

スロット ​

❓ よくある質問 ​

🎨 フォーム項目をカスタマイズするには？ ​

📚 関連文書 ​

📋 Form フォーム

📝 紹介

📦 導入

🎯 コードデモ

🚀 基本的な使い方

🔍 検証ルール

🎛️ フォーム項目タイプ - スイッチ

☑️ フォーム項目タイプ - チェックボックス

🔘 フォーム項目タイプ - ラジオボタン

🔢 フォーム項目タイプ - ステッパー

⭐ フォーム項目タイプ - レーティング

🎚️ フォーム項目タイプ - スライダー

📁 フォーム項目タイプ - ファイルアップロード

🎯 フォーム項目タイプ - ピッカー

📅 フォーム項目タイプ - 日付ピッカー

🗺️ フォーム項目タイプ - 地域選択器

📆 フォーム項目タイプ - カレンダー

API

Props

Rule データ構造

validate-trigger オプションの値

イベント

メソッド

型定義

スロット

❓ よくある質問

🎨 フォーム項目をカスタマイズするには？

📚 関連文書