Form 表单

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

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

表单使用的重点是:

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

基本用法

基本用法:

<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 来组合使用.