vue element plus Form 表单
表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。
TIP
Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。
典型表单#
最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。
在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。
Activity name
Activity zone
please select your zone
Activity time
-
Instant delivery
Activity type
Online activitiesPromotion activitiesOffline activitiesSimple brand exposure
Resources
SponsorVenue
Activity form
CreateCancel
TIP
W3C 标准定义：
当一个表单中只有一个单行文本输入字段时， 浏览器应当将在此字段中按下 Enter （回车键）的行为视为提交表单的请求。 如果希望阻止这一默认行为，可以在
<el-form>标签上添加@submit.prevent。
行内表单#
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
Approved by
Activity zone
Activity zone
Activity time
Query
对齐方式#
根据你们的设计情况，来选择最佳的标签对齐方式。
通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left， 当设为 top 时标签会置于表单域的顶部
LeftRightTop
Name
Activity zone
Activity form
表单校验#
Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。
Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 更多高级用法可参考 async-validator。
Activity name
Activity zone
Activity zone
Activity count
Activity count
Activity time
-
Instant delivery
Activity type
Online activitiesPromotion activitiesOffline activitiesSimple brand exposure
Resources
SponsorshipVenue
Activity form
CreateReset
自定义校验规则#
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。
Password
Confirm
Age
SubmitReset
TIP
自定义的校验回调函数必须被调用。 更多高级用法可参考 async-validator。
添加/删除表单项#
除了一次通过表单组件上的所有验证规则外. 您也可以动态地通过验证规则或删除单个表单字段的规则。
Domain0
Delete
SubmitNew domainReset
数字类型验证#
数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
age
SubmitReset
TIP
当一个 el-form-item 嵌套在另一个 el-form-item时，其标签宽度将是 0。 如果需要可以为 el-form-item 单独设置 label-width 属性。
尺寸控制#
表单中的所有子组件都继承了该表单的 size 属性。 同样，form-item 也有一个 size 属性。
如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可。
largedefaultsmall
LeftRightTop
Activity name
Activity zone
please select your zone
Activity time
-
Activity type
Online activitiesPromotion activities
Resources
SponsorVenue
CreateCancel
无障碍#
当在 el-form-item 内只有一个输入框（或相关的控制部件，如选择或复选框），表单项的标签将自动附加在那个输入框上。 然而，如果同时有多个输入框在 el-form-item内， 表单项将被分配为 WAI-ARIA 组 的角色。 在这种情况下，需要手动给每个 input 指定访问标签。
"Full Name" label is automatically attached to the input:
Full Name
"Your Information" serves as a label for the group of inputs.
You must specify labels on the individal inputs. Placeholders are not replacements for using the "label" attribute.
Your Information
Form API#
Form Attributes#
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model | 表单数据对象 | object | — |
| rules | 表单验证规则 | object | — |
| inline | 行内表单模式 | boolean | false |
| label-position | 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性 | enum | right |
| label-width | 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。 | string / number | '' |
| label-suffix | 表单域标签的后缀 | string | '' |
| hide-required-asterisk | 是否隐藏必填字段标签旁边的红色星号。 | boolean | false |
| require-asterisk-position | 星号的位置。 | enum | left |
| show-message | 是否显示校验错误信息 | boolean | true |
| inline-message | 是否以行内形式展示校验信息 | boolean | false |
| status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | false |
| validate-on-rule-change | 是否在 rules 属性改变后立即触发一次验证 | boolean | true |
| size | 用于控制该表单内组件的尺寸 | enum | — |
| disabled | 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性 | boolean | false |
| scroll-to-error | 当校验失败时，滚动到第一个错误表单项 | boolean | false |
| scroll-into-view-options 2.3.2 | 当校验有失败结果时，滚动到第一个失败的表单项目 可通过 scrollIntoView 配置 | object / boolean | — |
Form 事件#
| 名称 | 说明 | 类型 |
|---|---|---|
| validate | 任一表单项被校验后触发 | Function |
Form Slots#
| 事件名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | FormItem |
Form Exposes#
| 名称 | 说明 | 类型 |
|---|---|---|
| validate | 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。 | Function |
| validateField | 验证具体的某个字段。 | Function |
| resetFields | 重置该表单项，将其值重置为初始值，并移除校验结果 | Function |
| scrollToField | 滚动到指定的字段 | Function |
| clearValidate | 清理某个字段的表单验证信息。 | Function |
FormItem API#
FormItem Attributes#
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| prop | model 的键名。 它可以是一个属性的值(如 a.b.0 或 [a', 'b', '0'])。 在使用了 validate、resetFields 的方法时，该属性是必填的。 | string / string[] | — |
| label | 标签文本 | string | — |
| label-width | 标签宽度，例如 '50px'。 可以使用 auto。 | string / number | '' |
| required | 是否为必填项，如不设置，则会根据校验规则确认 | boolean | — |
| rules | 表单验证规则, 具体配置见下表, 更多内容可以参考async-validator | object | — |
| error | 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。 | string | — |
| show-message | 是否显示校验错误信息 | boolean | true |
| inline-message | 是否在行内显示校验信息 | string / boolean | '' |
| size | 用于控制该表单域下组件的默认尺寸 | enum | — |
| for | 和原生标签相同能力 | string | — |
| validate-status | formitem 校验的状态 | enum | — |
FormItemRule#
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| trigger | 验证逻辑的触发方式 | enum | — |
TIP
如果您不想根据输入事件触发验证器， 在相应的输入类型组件上设置 validate-event 属性为 false (<el-input>, <el-radio>, <el-select>, . ……).
FormItem Slots#
| 插槽名 | 说明 | 类型 |
|---|---|---|
| default | 表单的内容。 | — |
| label | 标签位置显示的内容 | object |
| error | 验证错误信息的显示内容 | object |
FormItem Exposes#
| 名称 | 说明 | 类型 |
|---|---|---|
| size | 表单项大小 | object |
| validateMessage | 校验消息 | object |
| validateState | 校验状态 | object |
| validate | 验证表单项 | Function |
| resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | Function |
| clearValidate | 移除该表单项的校验结果 | Function |
类型声明#
显示类型声明
源代码#
组件 • 文档