Form 表单

文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/form

用于输入与校验, 可以包含输入框, 单选框, 复选框, 文件上传等类型. 需要与 Field 配合使用.

表单使用的重点是:

收集表单项数据
重点是 Field 组件的使用
表单校验

基本用法

基本用法:

<van-form @submit="...">
  <van-cell-group inset>
    <van-field v-model="name" 
               name="name" 
               label="用户名" 
               placeholder="用户名" 
               require="auto"
               :rules="[{required: true, message: '必须输入用户名'}]">
    </van-field>
    <van-field v-model="pwd" 
               type="password"
               name="pwd" 
               label="密码" 
               placeholder="密码" 
               require="auto"
               :rules="[{required: true, message: '必须输入密码'}]">
    </van-field>
  </van-cell-group>
  <div style="margin: 1rem;">
    <van-button block type="primary" native-type="submit">提交</van-button>
  </div>
</van-form>

提交后, 并校验成功会触发 submit 事件, 并在事件中提供输入的数据

const onSubmitHandler = (values: Record<string, any>) => {
  // values 即为表单中的数据
}

该事件与传统表单提交不同, 可以简单看成是 return false 的传统表单提交事件.

提交表单校验失败会触发 failed 事件.

校验

在 Field 组件上使用 rules 属性, 该属性的类型与 AntdVue 中类似, 为 Rule[] 类型. 一般必填验证会与 required="auto" 连用.

Rule 数据结构

键名	说明	类型
`required`	必填. 当值为空 (空字符串, 空数组, `false`, `undefined`, `null`) 时验证失败.	`boolean`
`message`	错误提示, 支持使用函数来动态返回提示.	`string
`validator`	通过函数进行校验. 可以返回 `Promise`.	`(value, rule)=>boolean
`patterm`	通过正则表达式进行校验.	`RegExp`
`trigger`	触发机制, 优先级高于 `Form` 中设置的 `validate-trigger`. 可取值为: `onChange`, `onBlur`, `onSubmit`	`string
`formatter`	格式化函数, 将表单值转换后进行校验.	`(value, rule)=>any`
`validateEmpty`	设置 `validator` 和 `patterm` 是否对空值进行校验. 默认为 `true`	`boolean`

常用属性

label-width 设置表单 label 宽度. 默认单位 px

与其他表单组件结合使用

Field 作为输入框, 以及表单项来使用.

与 Field 输入框结合.
与 Switch 结合. 使用 Field 的 input 插槽放置 Switch.
与 Checkbox 结合. 使用 Field 的 input 插槽, 放置 CheckboxGroup, 然后横向放置复选框 (direction="horizontal").
与 Radio 结合使用. 用法与 Checkbox 一样.
与 Stepper 步进器结合使用. 与 Switch 用法一样.
与 Rate 评分控件结合使用, 与 Switch 用法一样.
与 Slider 滑块控件结合使用, 与 Switch 用法一样.
与 Uploader 文件上传控件一起使用. 与 Switch 用法一样.
与选择器组件一起使用, 例如 Picker, DatePicker, TimePicker, Calendar 等. 将 Field 设置为 readonly, 然后使用 Popup 组件包裹对应的 Picker 来组合使用.