fes.js/packages/fes-doc/docs/ui/form.md

pageClass
comp-page-class

Form 表单

概述

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

代码示例

北京市 上海市 深圳市 杭州市 南京市 重庆市 男 女 吃饭 睡觉 跑步 关 开 提交 取消

在 Wb-form 内，每个表单域由 Form-item 组成，可包含的控件有：Input、Radio、Checkbox、Switch、Select、InputDatePicker、TimePicker。

给 Form-item 设置属性 label 可以显示表单域的标签

北京市 上海市 深圳市 杭州市 南京市 重庆市 北京市 上海市 深圳市 杭州市 南京市 重庆市

query模式下FromItem上下间隔会缩小，执行校验但是不提示校验错误信息。

提交 重置 增加 减少

当需要动态维护 Form-item 时，可以给 Form-item 设置属性 rule 来单独为该域做验证。

设置属性 label-position，控制表单项描述的位置，left 为左对齐，right 为右对齐，top 置于表单组件头部。

设置属性 label-width，控制表单项描述的宽度，默认80。

Wb-form 和 Form-item 都可以设置 label-position 和 label-width ，Form-item的优先级高于Wb-form。

是 否 北京市 上海市 深圳市 杭州市 南京市 重庆市 吃饭 睡觉 跑步

提交 重置

Form 组件基于 async-validator 实现的数据验证，给 Form 设置属性 rule，同时给需要验证的 Form-item 设置属性 prop 指向对于字段即可。

FormItem 也可以设置校验的rule。如果From的rule中也配置了rule，则会跟Form设置的rule合并。

校验规则可以是响应式的对象。

如果FormItem里面不包含表单组件，则可以通过设置value来实现校验。

除了async-validator中定义的type之外，我们还定义了：

• mobile: 手机号
• cname: 中文名
• password: 密码，必须包含大写、小写字符和数字，8-16位
• money: 金额，可以配置小数点后的位数（afterPoint）
• equal: 与什么（enqualTo）相等
• min: 不小于（minTo）
• max: 不大于（maxTo）

API

Form Methods

校验整个表单

this.$refs.formValidate.validate((valid, errors) => {
    console.log(valid, errors)
})

校验表单项

对部分表单字段进行校验的方法，field为需校验的 prop

this.$refs.formValidate.validateField("field", (valid, errors) => {
    console.log(valid, errors)
})

重置

重置校验结果, 如果传了filed则只重置这个，如果没有则重置所有

this.$refs.formValidate.resetFields(() => {
})
this.$refs.formValidate.resetFields("field", () => {
})

Form Props

属性	说明	类型	默认值
type	表单类型，可选值有normal和query	String	normal
rule	表单验证规则，具体配置查看async-validator	Boolean	false
labelPosition	表单域标签的位置，可选值为left、right、top	String	right
labelWidth	表单域标签的宽度	Number	80
showMessage	是否显示校验信息	Boolean	true
autocomplete	是否配置为自动完成功能，可选有on、off	Boolean	off

Form Events

事件名	说明	返回值
on-validate	对表单项进行校验后触发	(errors) => void
submit	提交时触发	(valid, errors) => void

FormItem Props

属性	说明	类型	默认值
prop	定义了prop才会被校验	String	null
label	FormItem项标签名称	String	null
rule	表单验证规则，具体配置查看async-validator	Boolean	false
labelPosition	表单域标签的位置，可选值为left、right、top	String	right
labelWidth	表单域标签的宽度	Number	80
showMessage	是否显示校验信息	Boolean	true
value	配置后，则根据此值进行校验	String, Number, Array, Boolean, Object	null