表单
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。
基础用法
男
女
吃零食
刷抖音
睡觉
提交
重置
Form 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| rules |
表单验证规则 |
object |
-- |
-- |
| model |
表单数据对象 |
object |
-- |
-- |
| label-width |
表单域标签的宽度,例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 |
string |
-- |
-- |
| model |
表单数据对象 |
object |
-- |
-- |
Form 方法
| 方法名 |
说明 |
参数 |
| validate |
对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise |
Function(callback: Function(boolean, object)) |
| validateField |
对部分表单字段进行校验的方法 |
Function(props: array | string, callback: Function(errorMessage: string)) |
| resetFields |
对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 |
-- |
Validate 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| type |
数据类型 |
String |
string|array |
string |
| required |
必填 |
Boolean |
true|false |
false |
| min |
允许输入的最小长度 |
Number |
-- |
-- |
| max |
允许输入的最大长度 |
Number |
-- |
-- |
| pattern |
校验的正则表达式 |
Regexp |
-- |
-- |
| validator |
自定义验证方法 |
Function(value, {rules, prop}, callback) |
-- |
-- |
| message |
错误信息 |
string |
-- |
-- |
FormItem 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| prop |
表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的 |
string |
传入 Form 组件的 model 中的字段 |
-- |
| label |
标签文本 |
string |
-- |
-- |
| label-width |
表单域标签的宽度,例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 |
string |
-- |
-- |
FormItem 方法
| 方法名 |
说明 |
参数 |
| resetField |
对该表单项进行重置,将其值重置为初始值并移除校验结果 |
-- |