# CFormItem 表单项组件 ## 功能说明 CFormItem 是表单项容器组件,用于包装各种表单控件,提供表单项的标签、验证规则和错误状态管理。组件基于 async-validator 库实现表单验证功能。 ## 引用方式 ```js import { CFormItem } from '@components/forms/form'; ``` ## 组件参数 - `formRes` (Object,必填):表单资源对象,由 CForm 组件提供 - `name` (String,必填):表单项字段键名,对应表单数据对象中的属性名 - `label` (String,可选):表单项中文名,用于显示和错误提示 - `required` (Boolean,可选):表单项是否必填 - `rules` (Array,可选):表单项验证规则,基于 async-validator 的规则配置 - `disabled` (Boolean,可选):表单项是否禁用 ## 使用示例 ### 基础用法 ```html ``` ### 使用验证规则 ```html ``` ### 复合验证规则 ```html ``` ## 注意事项 1. CFormItem 组件需要在 CForm 组件内使用,并通过 slot 接收表单控件 2. 表单项的 name 属性必须与表单数据对象中的属性名对应 3. 验证规则基于 async-validator 库,支持多种验证类型和自定义规则 4. 常用的验证规则类型包括: - `type`:类型验证,如 string、number、boolean、array、object、url、email 等 - `len`:长度验证,string 类型为字符串长度,number 类型为确定数字,array 类型为数组长度 - `max`:最大值验证,string 类型为最大长度,number 类型为最大值,array 类型为最大长度 - `min`:最小值验证,string 类型为最小长度,number 类型为最小值,array 类型为最小长度 - `pattern`:正则表达式匹配 - `required`:是否为必填字段 - `transform`:将字段值转换成目标值后进行校验 - `message`:错误信息,不设置时会通过模板自动生成 5. 表单验证失败时,组件会自动显示错误状态,并在 5 秒后自动清除