# Schema规范

## 组件

通过`key`指定表单提交时候的字段名，通过`type`指定组件类型，可以通过`value`来设置默认值

```javascript
{
    key: 'name',
    type: 'Input',
    value: '内容'
}
```

## 状态

通过`status`字段去设置组件状态，目前有`edit`（编辑）、`preview`（预览）、`disabled`（禁用）、`hidden`（隐藏）四种状态，默认为`edit`，想了解更多关于`status`配置可以移步到[表单状态](zh-cn/status)

```javascript
{
    key: 'name',
    type: 'Input',
    status: 'preview'
}
```

## 样式相关

通过`ui`字段去设置组件样式相关配置，跟`Antd`的`Form.Item`配置对齐

```javascript
{
    key: 'name',
    type: 'Input',
    ui: {
        label: '标签',
        labelCol: 2,
        wrapperCol: 12
    }
}
```

## 属性相关

通过`props`字段去设置组件属性相关配置，跟组件的`props`对齐

```javascript
{
    key: 'name',
    type: 'Input',
    props: {
        placeholder: '请输入'
    }
}
```

## 列表选项

通过`options`字段去配置一些列表组件的列表选项，想了解更多关于`options`配置可以移步到[列表选项](zh-cn/options)

```javascript
{
    key: 'type',
    type: 'Select',
    options: [
        {
            name: '水果',
            value: 'fruit'
        },
        {
            name: '蔬菜',
            value: 'vegetables'
        }
    ]
}
```

## 表单列表和表单组

表单列表`Array`和表单组`Object`下有很多子组件，是通过`children`去配置子组件，想了解更多关于表单列表和表单组可以移步到[表单列表](zh-cn/fieldList)和[表单组](zh-cn/fieldGroup)


```javascript
{
    key: 'type',
    type: 'Array',
    children: [
        {
            key: 'name',
            type: 'Input',
            ui: {
                label: '姓名'
            }
        },
        {
            key: 'age',
            type: 'InputNumber',
            ui: {
                label: '年龄'
            }
        }
    ]
}
```


## 校验

通过`rules`字段设置校验相关配置，使用的是`Antd`的校验类库，所以校验方式可以参考[async-validator](https://github.com/yiminghe/async-validator)，不同点是支持多类型校验、多状态和多触发方式，想了解更多关于`rules`配置可以移步到[表单校验](zh-cn/rules)

```javascript
{
    key: 'type',
    type: 'Input',
    rules: [
        {
            required: true,
            trigger: 'blur',
            message: '不能为空'
        },
        {
            type: 'mail',
            message: '格式不正确'
        },
        {
            validator: (rule, value) => value > 10,
            message: '值要大于10'
        }
    ]
}
```

## 联动

通过`listeners`字段设置联动相关配置，联动设计的原则是将组件的变化逻辑体现在自身的配置中，所以不要在`listeners`里面去改变其他组件的值或属性，想了解更多关于`listeners`配置可以移步到[表单联动](zh-cn/listeners)

```javascript
{
    key: 'name',
    type: 'Input',
    listeners: [
        {
            watch: ['age'],
            condition: 'age.value === 18',
            set: {
                status: 'hidden'
            }
        }
    ]
}
```