Meri Plus表单 Form
表单包含输入框、单选框、下拉选择、多选框等用户输入的组件。 使用表单，您可以收集、验证和提交数据。
演示
基础用法
行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
对齐方式
表单校验
Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 更多高级用法可参考 async-validator。
不同的error内容展示
Form 组件提供了不同的error内容展示方式，你可以根据使用具体场景进行选择。
单独表单项校验
可单独使用m-form-item组件进行校验
动态表单项
除了一次通过表单组件上的所有验证规则外. 您也可以动态地通过验证规则或删除单个表单字段的规则。
表单 API
Form 属性
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| model | Object | any | - | 表单数据对象 |
| rules | Array | any | - | 表单验证规则 async-validator |
| inline | Boolean | true |false | false | 行内表单模式 |
| label-position | String | left | right | top | right | 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性 |
| label-width | String | - | - | 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto |
| scroll-to-error | Boolean | true | false | false | 当校验失败时，滚动到第一个错误表单项 |
| require-asterisk-position | String | left | right | right | 星号的位置 |
| show-message | Boolean | true | false | true | 是否显示校验错误信息 |
| error-use-popover | Boolean | true | false | true | 是否使用popover展示错误信息 |
| novalidate | Boolean | true | false | true | 是否禁用浏览器原生校验 |
Form 方法
| 参数 | 类型 | 说明 |
|---|---|---|
| validate | (callback?: (isValid: boolean, fields?: Values) => void) => Promise<void> | 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。 |
| validateField | (props: Arrayable<string>, callback?: (isValid: boolean, fields?: Values) => void) => Promise<void> | 验证具体的某个字段。 |
| clearValidate | (props?: Arrayable<string>) => void | 清理某个字段的表单验证信息。 |
| scrollToField | (prop: Arrayable<string>) => void | 滚动到指定的字段 |
Form 插槽
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| - | 自定义默认内容 | FormItem |
表单项目 API
Form Item 属性
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| prop | string | strung[] | any | '' | model 的键名。 它可以是一个路径数组(例如 ['a', 'b', 0])。 在定义了 validate 的方法时，该属性是必填的 |
| label | string | any | - | 标签文本 |
| label-width | String | - | - | 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto |
| rules | Array | any | - | 表单验证规则 async-validator |
| show-message | Boolean | true | false | true | 当是否显示校验错误信息 |
| item-model | any | - | - | 自定义校验的值 |
| error-use-popover | Boolean | true | false | true | 是否使用popover展示错误信息 |
| require-asterisk-position | String | left | right | left | 星号的位置 |
Form Item 插槽
| 插槽名 | 说明 | 插槽作用域 |
|---|---|---|
| — | 表单的内容。 | — |
label | 标签位置显示的内容 | { label } |
error | 验证错误信息的显示内容 | { error } |
Form Item 规则
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| trigger | 验证逻辑的触发方式 | blur|change | — |
Form Item 方法
| 参数 | 类型 | 说明 |
|---|---|---|
| validate | () => Promise<void> | 对表单项进行验证。返回 Promise。 |
| clearValidate | () => void | 清理表单项验证信息。 |