CFormItem 表单项组件

功能说明

CFormItem 是表单项容器组件，用于包装各种表单控件，提供表单项的标签、验证规则和错误状态管理。组件基于 async-validator 库实现表单验证功能。

引用方式

import { CFormItem } from '@components/forms/form';

组件参数

• formRes (Object，必填)：表单资源对象，由 CForm 组件提供
• name (String，必填)：表单项字段键名，对应表单数据对象中的属性名
• label (String，可选)：表单项中文名，用于显示和错误提示
• required (Boolean，可选)：表单项是否必填
• rules (Array，可选)：表单项验证规则，基于 async-validator 的规则配置
• disabled (Boolean，可选)：表单项是否禁用

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="username" label="用户名" required>
      <CInput type="text" placeholder="请输入用户名" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CInput } from '@components/forms/input';

export default {
  components: {
    CForm,
    CFormItem,
    CInput
  },
  data() {
    return {
      form: {
        username: ''
      }
    };
  }
};
</script>

使用验证规则

<CFormItem 
  name="email" 
  label="邮箱" 
  :rules="[
    { type: 'email', message: '请输入有效的邮箱地址' }
  ]"
>
  <CInput type="text" placeholder="请输入邮箱" />
</CFormItem>

复合验证规则

<CFormItem 
  name="password" 
  label="密码" 
  :rules="[
    { required: true, message: '请输入密码' },
    { type: 'string', min: 6, message: '密码长度不能少于6个字符' },
    { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,20}$/, message: '密码必须包含大小写字母和数字' }
  ]"
>
  <CInput type="password" placeholder="请输入密码" />
</CFormItem>

注意事项

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：错误信息，不设置时会通过模板自动生成

1. 表单验证失败时，组件会自动显示错误状态，并在 5 秒后自动清除