## Form 表单 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 ### 典型表单 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。 ::: demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker ```html - 立即创建 取消 ``` ::: ### 行内表单 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 ::: demo 设置 `inline` 属性可以让表单域变为行内的表单域 ```html 查询 ``` ::: ### 对齐方式 根据具体目标和制约因素，选择最佳的标签对齐方式。 顶部对齐 ::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部 ```html ``` ::: 右对齐 ::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的 ```html ``` ::: 左对齐 ::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `left` 时标签会变为左对齐 ```html ``` ::: ### 表单验证 在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。 ::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属相设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator) ```html - 立即创建 重置 ``` ::: ### 自定义校验规则 ::: demo 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证 ```html 提交 重置 ``` ::: ### 动态增减表单项 ::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则 ```html 删除 提交 新增域名 重置 ``` ::: ### Form Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | model | 表单数据对象 | object | — | — | | rules | 表单验证规则 | object | — | — | | inline | 行内表单模式 | boolean | — | false | | label-position | 表单域标签的位置 | string | right/left/top | right | | label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — | | label-suffix | 表单域标签的后缀 | string | — | — | ### Form Methods | 方法名 | 说明 | |---------- |-------------- | | validate(cb) | 对整个表单进行校验的方法 | | validateField(prop, cb) | 对部分表单字段进行校验的方法 | | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | ### Form-Item Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | prop | 表单域 model 字段 | string | 传入 Form 组件的 `model` 中的字段 | — | | label | 标签文本 | string | — | — | | label-width | 表单域标签的的宽度，例如 '50px' | string | — | — | | required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false | | rules | 表单验证规则 | object | — | — | | error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |