# 表单校验

通过`rules`字段配置校验方式，因为基于[async-validator](https://github.com/yiminghe/async-validator)实现的表单校验，所以[async-validator](https://github.com/yiminghe/async-validator)支持的字段校验方式都可以使用，同时拓展了`status`校验状态和`trigger`校验触发方式

+ status：校验状态
  + error（默认）：错误
  + warning：警告
+ trigger：触发方式
  + submit：提交时候触发
  + change：值变化时候触发
  + blur：失焦时候触发

```javascript
export default [
    {
        key: 'name'
        type: 'Input',
        ui: {
            label: '姓名',
            required: true
        },
        rules: [
            {
                required: true,
                message: '姓名必填',
                trigger: 'change',
                status: 'error'
            },
            {
                type: 'string',
                max: 100,
                message: '不能超过100个字符',
                trigger: 'change',
                status: 'warning'
            }
        ]
    }
];
```

最终的校验结果可以在返回的`valid`字段查看，如下所示：

```javascript
import { XForm } from '@wowpic/xform-react';
import schema from './schema.js';

export default function () {
    const formRef = useRef(null);

    const onSubmit = () => {
        formRef.current.submit().then(data => {
            const { valid, value } = data;
            // 通过valid查看校验结果
            console.log(valid, value);
        });
    };

    const onReset = () => {
        formRef.current.reset();
    };

    return (
        <>
            <XForm
                ref={formRef}
                schema={schema}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 12 }}
            />
            <div>
                <Button type="primary" onClick={onSubmit}>提交</Button>
                <Button onClick={onReset}>重置</Button>
            </div>
        </>
    );
};
```

> 注意`rules`可以有多条校验，但是多条校验同时生效的话只会展示其中的一条