具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
在 Wb-form 内,每个表单域由 Form-item 组成,可包含的控件有:Input、Radio、Checkbox、Switch、Select、DatePicker、Upload。
给 Form-item 设置属性 label 可以显示表单域的标签
query模式下FromItem上下间隔会缩小,而且不提示校验错误信息,需要自行处理
设置属性 label-position,可以改变表单域标签的位置,left 为左对齐,right 为右对齐,top 会置于表单域顶部。
Form 组件基于 async-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 Form-item 设置属性 prop 指向对于字段即可。
当需要动态维护 Form-item 时,也可以直接给 Form-item 设置属性 rule 来单独为该域做验证。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
rules | 表单验证规则,具体配置查看 async-validator | Array | [] |
labelPosition | 表单域标签的位置,可选值为 left、right、top | String | right |
labelWidth | 表单域标签的宽度,所有的 Form-item 都会继承 Form 组件的 label-width 的值 | Number | 80 |
type | 表单类型,可选值有normal和query | String | normal |
属性 | 说明 | 参数 |
---|---|---|
validate | 校验整个表单 | callback |
validate | 对部分表单字段进行校验的方法,参数1为需校验的 prop,参数2为检验完回调,同上 | field, callback |
resetFields | 重置校验结果, 如果传了filed则只重置这个,如果没有则重置所有 | [field,] callback |
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
prop | 对应 表单域 value 里的字段 | String | null |
label | 标签文本 | String | null |
labelWidth | 标签的宽度 | Number | null |
showMessage | 是否显示校验错误信息 | Boolean | true |