【Ant Design】validator实现自定义表单提交规则callback和Promise方式

场景

Form给我们提供了很多表单提交的便捷，各种属性都能够派上用场
现想实现一个自定义的规则可以通过callback也可以通过Promise去阻断表单的提交

Callback方式

<Form.Item
    hasFeedback
    rules={
    
    [
        {
    
    
            validator: async (rule, value, callback)=>{
    
    
                // 请求判断用户是否存在
                let res = await that.certificate(value);
                if(res.status === 1)
                    callback('用户名已存在');
                else callback();
            },
        }
    ]}
>
</Form.Item>

但其实promis更为可控一些，因为callback不管过程如何，最终都需要被调用，callback(‘xxx’’)表示的是校验未通过，而callback()才表示校验已通过，但如果你加上hasFeedback这个属性，你会发现，只要callback都是 √

Promise方法

<Form.Item
    hasFeedback
    rules={
    
    [
        {
    
    
            validator: async (rule, value)=>{
    
    
                // 请求判断用户是否存在
                let res = await that.certificate(value);
                if(res.status === 1)
                    return Promise.reject('用户名已存在');
                else return Promise.resolve('用户名可用');
            },
        }
    ]}
>
</Form.Item>