/*! For license information please see 4150.3a3c8703.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["4150"],{40732:function(s,a,n){"use strict";n.r(a);var l=n("80681");let t=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,l.wg)(),(0,l.iD)("div",{class:"van-doc-markdown-body",innerHTML:'Form
\nIntro
\n
Used for data entry and verification, and supports input boxes, radio buttons, check boxes, file uploads and other types. Should be used with Field component.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { Form, Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Form);\napp.use(Field);\napp.use(CellGroup);\n
\n
Usage
\nBasic Usage
\n
<van-form @submit="onSubmit">\n <van-cell-group inset>\n <van-field\n v-model="username"\n name="Username"\n label="Username"\n placeholder="Username"\n :rules="[{ required: true, message: 'Username is required' }]"\n />\n <van-field\n v-model="password"\n type="password"\n name="Password"\n label="Password"\n placeholder="Password"\n :rules="[{ required: true, message: 'Password is required' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n</van-form>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const username = ref('');\n const password = ref('');\n const onSubmit = (values) => {\n console.log('submit', values);\n };\n\n return {\n username,\n password,\n onSubmit,\n };\n },\n};\n
\n
Validate Rules
\n
<van-form @failed="onFailed">\n <van-cell-group inset>\n <van-field\n v-model="value1"\n name="pattern"\n placeholder="Use pattern"\n :rules="[{ pattern, message: 'Error message' }]"\n />\n <van-field\n v-model="value2"\n name="validator"\n placeholder="Use validator"\n :rules="[{ validator, message: 'Error message' }]"\n />\n <van-field\n v-model="value3"\n name="validatorMessage"\n placeholder="Use validator to return message"\n :rules="[{ validator: validatorMessage }]"\n />\n <van-field\n v-model="value4"\n name="asyncValidator"\n placeholder="Use async validator"\n :rules="[{ validator: asyncValidator, message: 'Error message' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n</van-form>\n
\n
import { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n const value3 = ref('abc');\n const value4 = ref('');\n const pattern = /\\d{6}/;\n\n const validator = (val) => /1\\d{10}/.test(val);\n\n const validatorMessage = (val) => `${val} is invalid`;\n\n const asyncValidator = (val) =>\n new Promise((resolve) => {\n showLoadingToast('Validating...');\n\n setTimeout(() => {\n closeToast();\n resolve(val === '1234');\n }, 1000);\n });\n\n const onFailed = (errorInfo) => {\n console.log('failed', errorInfo);\n };\n\n return {\n value1,\n value2,\n value3,\n value4,\n pattern,\n onFailed,\n validator,\n asyncValidator,\n validatorMessage,\n };\n },\n};\n
\n
Field Type - Switch
\n
<van-field name="switch" label="Switch">\n <template #input>\n <van-switch v-model="checked" />\n </template>\n</van-field>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n return { checked };\n },\n};\n
\n
Field Type - Checkbox
\n
<van-field name="checkbox" label="Checkbox">\n <template #input>\n <van-checkbox v-model="checked" shape="square" />\n </template>\n</van-field>\n<van-field name="checkboxGroup" label="CheckboxGroup">\n <template #input>\n <van-checkbox-group v-model="groupChecked" direction="horizontal">\n <van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>\n <van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>\n </van-checkbox-group>\n </template>\n</van-field>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n const groupChecked = ref([]);\n return {\n checked,\n groupChecked,\n };\n },\n};\n
\n
Field Type - Radio
\n
<van-field name="radio" label="Radio">\n <template #input>\n <van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n </van-radio-group>\n </template>\n</van-field>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n
Field Type - Stepper
\n
<van-field name="stepper" label="Stepper">\n <template #input>\n <van-stepper v-model="value" />\n </template>\n</van-field>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n
Field Type - Rate
\n
<van-field name="rate" label="Rate">\n <template #input>\n <van-rate v-model="value" />\n </template>\n</van-field>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n
Field Type - Slider
\n
<van-field name="slider" label="Slider">\n <template #input>\n <van-slider v-model="value" />\n </template>\n</van-field>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(50);\n return { value };\n },\n};\n
\n
Field Type - Uploader
\n
<van-field name="uploader" label="Uploader">\n <template #input>\n <van-uploader v-model="value" />\n </template>\n</van-field>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n return { value };\n },\n};\n
\n
Field Type - Picker
\n
<van-field\n v-model="result"\n is-link\n readonly\n name="picker"\n label="Picker"\n placeholder="Select city"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-picker\n :columns="columns"\n @confirm="onConfirm"\n @cancel="showPicker = false"\n />\n</van-popup>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Georgia', value: 'Georgia' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n\n const onConfirm = ({ selectedOptions }) => {\n result.value = selectedOptions[0]?.text;\n showPicker.value = false;\n };\n\n return {\n result,\n columns,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n
Field Type - DatePicker
\n
<van-field\n v-model="result"\n is-link\n readonly\n name="datePicker"\n label="Date Picker"\n placeholder="Select date"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />\n</van-popup>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const onConfirm = ({ selectedValues }) => {\n result.value = selectedValues.join('/');\n showPicker.value = false;\n };\n\n return {\n result,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n
Field Type - Area
\n
<van-field\n v-model="result"\n is-link\n readonly\n name="area"\n label="Area Picker"\n placeholder="Select area"\n @click="showArea = true"\n/>\n<van-popup v-model:show="showArea" position="bottom">\n <van-area\n :area-list="areaList"\n @confirm="onConfirm"\n @cancel="showArea = false"\n />\n</van-popup>\n
\n
import { ref } from 'vue';\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n const result = ref('');\n const showArea = ref(false);\n const onConfirm = ({ selectedOptions }) => {\n showArea.value = false;\n result.value = selectedOptions.map((item) => item.text).join('/');\n };\n\n return {\n result,\n areaList,\n showArea,\n onConfirm,\n };\n },\n};\n
\n
Field Type - Calendar
\n
<van-field\n v-model="result"\n is-link\n readonly\n name="calendar"\n label="Calendar"\n placeholder="Select date"\n @click="showCalendar = true"\n/>\n<van-calendar v-model:show="showCalendar" @confirm="onConfirm" />\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showCalendar = ref(false);\n const onConfirm = (date) => {\n result.value = `${date.getMonth() + 1}/${date.getDate()}`;\n showCalendar.value = false;\n };\n\n return {\n result,\n onConfirm,\n showCalendar,\n };\n },\n};\n
\n
API
\nProps
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| label-width | \nField label width | \nnumber | string | \n6.2em | \n
\n\n| label-align | \nField label align, can be set to center right top | \nstring | \nleft | \n
\n\n| input-align | \nField input align, can be set to center right | \nstring | \nleft | \n
\n\n| error-message-align | \nError message align, can be set to center right | \nstring | \nleft | \n
\n\n| validate-trigger | \nWhen to validate the form, can be set to onChange\u3001onSubmit, supports using array to set multiple values | \nstring | string[] | \nonBlur | \n
\n\n| colon | \nWhether to display colon after label | \nboolean | \nfalse | \n
\n\n| disabled | \nWhether to disable form | \nboolean | \nfalse | \n
\n\n| readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
\n\nrequired v4.7.3 | \nWhether to show required mark | \nboolean | \'auto\' | \nnull | \n
\n\n| validate-first | \nWhether to stop the validation when a rule fails | \nboolean | \nfalse | \n
\n\n| scroll-to-error | \nWhether to scroll to the error field when validation failed | \nboolean | \nfalse | \n
\n\n| show-error | \nWhether to highlight input when validation failed | \nboolean | \nfalse | \n
\n\n| show-error-message | \nWhether to show error message when validation failed | \nboolean | \ntrue | \n
\n\n| submit-on-enter | \nWhether to submit form on enter | \nboolean | \ntrue | \n
\n\n
\n
Data Structure of Rule
\n
\n\n\n| Key | \nDescription | \nType | \n
\n\n\n\n| required | \nWhether to be a required field, the value is not allowed to be empty (empty string, empty array, false, undefined, null) | \nboolean | \n
\n\n| message | \nError message, can be a function to dynamically return message content | \nstring | (value, rule) => string | \n
\n\n| validator | \nCustom validator, can return a Promise to validate dynamically | \n(value, rule) => boolean | string | Promise | \n
\n\n| pattern | \nRegexp pattern, if the regexp cannot match, means that the validation fails | \nRegExp | \n
\n\n| trigger | \nWhen to validate the form, priority is higher than the validate-trigger of the Form component, can be set to onChange, onBlur, onSubmit | \nstring | string[] | \n
\n\n| formatter | \nFormat value before validate | \n(value, rule) => any | \n
\n\n| validateEmpty | \nControls whether the validator and pattern options to verify empty values, the default value is true, you can set to false to disable this behavior | \nboolean | \n
\n\n
\n
validate-trigger
\n
\n\n\n| Value | \nDescription | \n
\n\n\n\n| onSubmit | \nTrigger validation after submitting form | \n
\n\n| onBlur | \nTrigger validation after submitting form or blurring input | \n
\n\n| onChange | \nTrigger validation after submitting form or changing input value | \n
\n\n
\n
Events
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| submit | \nEmitted after submitting the form and validation passed | \nvalues: object | \n
\n\n| failed | \nEmitted after submitting the form and validation failed | \nerrorInfo: { values: object, errors: object[] } | \n
\n\n
\n
Methods
\n
Use ref to get Form instance and call instance methods.
\n
\n\n\n| Name | \nDescription | \nAttribute | \nReturn value | \n
\n\n\n\n| submit | \nSubmit form | \n- | \n- | \n
\n\n| getValues | \nGet current form values | \n- | \nRecord<string, unknown> | \n
\n\n| validate | \nValidate form | \nname?: string | string[] | \nPromise<void> | \n
\n\n| resetValidation | \nReset validation | \nname?: string | string[] | \n- | \n
\n\n| getValidationStatus | \nGet validation status of all fields\uFF0Cstatus can be passed\u3001failed\u3001unvalidated | \n- | \nRecord<string, FieldValidationStatus> | \n
\n\n| scrollToField | \nScroll to field | \nname: string, alignToTop: boolean | \n- | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type { FormProps, FormInstance } from 'vant';\n
\n
FormInstance is the type of component instance:
\n
import { ref } from 'vue';\nimport type { FormInstance } from 'vant';\n\nconst formRef = ref<FormInstance>();\n\nformRef.value?.submit();\n
\n
Slots
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| default | \nForm content | \n
\n\n
\n