C5 FormEngine - 表单引擎

Day 1 核心组件 C5，支持动态表单、验证、字段联动。

安装

npm install @carbide/c5-form-engine

使用

import { FormEngine, validators } from '@carbide/c5-form-engine';

const form = new FormEngine({
  fields: [
    {
      name: 'email',
      type: 'email',
      label: '邮箱',
      validators: [validators.required(), validators.email()]
    },
    {
      name: 'password',
      type: 'text',
      label: '密码',
      validators: [validators.required(), validators.minLength(6)]
    },
    {
      name: 'bio',
      type: 'textarea',
      label: '简介',
      visible: (values) => values.password?.length > 0
    }
  ],
  onChange: (values) => console.log(values)
});

// 设置值
form.setValue('email', '[email protected]');

// 获取值
const values = form.getValues();

// 验证
const isValid = form.validate();
const errors = form.getErrors();

// 监听变化
form.onChange((values, errors) => {
  console.log(values, errors);
});

// 获取可见字段（支持联动）
const visibleFields = form.getVisibleFields();

// 重置
form.reset();

验证器

| 验证器 | 说明 | |--------|------| | validators.required(msg?) | 必填 | | validators.email(msg?) | 邮箱格式 | | validators.minLength(n, msg?) | 最小长度 | | validators.maxLength(n, msg?) | 最大长度 |

在项目中使用

详见 day-01/07-email-writer 等项目。