主题
Form 表单
使用
import { KForm } from "@ksware/ksw-ux";表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。
典型表单
最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。
在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。
TIP
W3C 标准定义:
当一个表单中只有一个单行文本输入字段时， 浏览器应当将在此字段中按下 Enter （回车键）的行为视为提交表单的请求。 如果希望阻止这一默认行为，可以在 <k-form> 标签上添加 @submit.prevent。
行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
对齐方式
根据你们的设计情况，来选择最佳的标签对齐方式。
表单校验
Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。
自定义校验规则
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
本例还使用 status-icon 属性为输入框添加了表示校验结果的反馈图标。
TIP
自定义的校验回调函数必须被调用。 校验规则参见 async-validator.
添加/删除表单项
除了一次通过表单组件上的所有验证规则外. 您也可以动态地通过验证规则或删除单个表单字段的规则。
数字类型验证
数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
尺寸控制
表单中的所有子组件都继承了该表单的 size 属性。 同样，form-item 也有一个 size 属性。
如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可。
隐藏label
如果不需要显示 label 标签，可以设置 showLabel 属性为 false, 如果需要隐藏单独的 label 标签，可以在Item上设置showLabel 属性为 false。
隐藏冒号
如果不需要显示冒号，可以设置 showColon 属性为 false。
嵌套item
嵌套form
Form API
Form Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model | 表单数据对象 | object | - |
| rules | 表单验证规则 | object | - |
| inline | 行内表单模式 | boolean | false |
| label-position | 表单域标签的位置，当设置为left或right时，则也需要设置label-width属性 | enum | right |
| label-width | 标签的长度，作为Form直接子元素的form-item会继承该值 | 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 | form尺寸 | enum | base |
| disabled | 是否禁用该表单内的所有组件。如果设置为true, 它将覆盖内部组件的disabled属性 | boolean | false |
| scroll-to-error | 当校验失败时，滚动到第一个错误表单项 | boolean | false |
| scroll-into-view-options | 是否显示右上角当校验有失败结果时，滚动到第一个失败的表单项目 | boolean | object | - |
| showColon | 是否显示冒号 | boolean | false |
| showLabel | 是否显示label | boolean | true |
| auto-focus-first 1.2.0 | 是否自动聚焦第一个 input 或 textarea 元素 | boolean | false |
| auto-focus-to 1.2.0 | 自动聚焦的目标input元素，支持元素选择器、ref等参数，如果传入的元素不为input或textarea，则聚焦到其后代的第一个input元素 | string | Element | Ref<ComponentInstance> | - |
Form Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| validate | 任一表单项被校验后触发 | Function |
Form Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 自定义默认内容 | - |
Form Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| validate | 对整个表单的内容进行验证。接收一个回调函数或返回Promise | Function |
| validateField | 验证表单具体的某个字段 | Function |
| resetFields | 重置该表单项，将其值重置为初始值，并移除校验结果 | Function |
| scrollToField | 滚动到指定的字段 | Function |
| clearValidate | 清理某个字段的表单验证信息 | Function |
| fields | 获取所有字段的context | array |
FormItem API
FormItem Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| prop | 表单数据字段名 | string | string[] | - |
| label | 标签文本 | string | - |
| label-position | 表单域标签的位置，当设置为left或right时，则也需要设置label-width属性，默认会继承Form的label-position | enum | - |
| label-width | 标签宽度 | string | number | - |
| required | 是否为必填项 | boolean | - |
| rules | 表单验证规则 | object | - |
| error | 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息 | string | - |
| show-message | 是否显示校验错误信息 | boolean | true |
| inline-message | 是否在行内显示校验信息 | boolean | string | '' |
| size | 表单域大小 | enum | base |
| validate-status | 表单域验证状态 | enum | - |
| for | form原生属性 | string | - |
| showLabel | 是否显示label | boolean | true |
| showColon 1.1.20 | 是否显示冒号 | boolean | false |
FormItem Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 表单的内容 | - |
| label | 标签位置显示的内容 | object |
| error | 验证错误信息的显示内容 | object |
FormItem Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| validateMessage | 校验消息 | object |
| validateState | 校验状态 | object |
| validate | 验证表单项 | Function |
| resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | Function |
| clearValidate | 移除该表单项的校验结果 | object |