#Form表单验证方法
##一、添加rules规则
这个最简单，像这样：

<Form.Item
    label="项目名称"
    name="projectName"
    rules={[
        {
            required: true,
            message: '请输入项目名称!',
        },
    ]}
>
    <Input placeholder="请输入" />
</Form.Item>

这可能是最常用的一种使用方法了，输入不能为空。

二、使用validator

像这样：

const ProjectDescValidator = (rule: any, value: string, callback: any) => {
    try {
        if (value && value.length > 200) {
            callback(new Error('项目描述不能超过200字符'));
        }
        callback();
    } catch (err) {
        callback(err);
    }
};
...
<Form.Item
    label="项目描述"
    name="projectDesc"
    //验证项目描述字符数
    rules={[{ validator: ProjectDescValidator }]}
>
    <TextArea placeholder="请输入" autoSize={{ minRows: 2, maxRows: 6 }} />
</Form.Item>

value就是你输入的字符串，用validator可以进行自定义规则的校验，也是非常地好用。

三、非输入型表单项验证

比如Form.Item里是自定义组件，如何对这种类型的组件进行校验呢，这是我最近遇到的一个难题，问题描述如下：

需求是在tag不为空时才可以创建，那么如何对这种数据进行校验呢，查看antd官网，大多只是对输入类型进行校验，如Input，像上面两种校验方式就可以轻松解决，直到看到了这里

好，既然官方给出了解决方案，我们就去解决吧，思路就是在自定义组件中，必须有value和onChange，每次调用setstate时，同时调用onChange&&onChange(value)就可以了，代码如下：

<Form.Item
    label="name"
    name="name"
    getValueFromEvent={(e) => {
        setTagsName(e);
    }}
    rules={[{
        validator: () => {
            if (tags.length) {
                return Promise.resolve();
            } else {
                return Promise.reject(new Error('请添加onesName'));
            }
        },
    }]}
>
    <SearchTags />
</Form.Item>

SearchTags组件关键代码

interface IProps {
    value?: string[];
    projectId?: string;
    onChange?: (value: any) => void;
}
...
const handleClose = (removedTag: string) => {
    //返回最新的tags
    value = tags.filter((tag) => tag !== removedTag);
    setValue(value);
    onChange && onChange(value);
};
...
{tags.map((tag) => <Tag key={tag} closable onClose={() => handleClose(tag)} color="processing">{tag}</Tag>)}

这样就差不多了，每次点击tag的叉号就会调用onClose函数，触发了setValue后，onChange && onChange(value)语句可以让你使用value，比如我是这样使用的，在父组件里：

getValueFromEvent={(e) => {
    setTagsName(e);
}}

getValueFromEvent函数可以把自定义组件的内容获取出来，放入父组件的状态中准备进行校验，这样就大功告成！