[Ant Design] Validator implementa métodos de devolución de llamada y Promise para reglas de envío de formularios personalizados

Escenas

El formulario nos proporciona mucha comodidad para el envío de formularios, y varios atributos pueden ser útiles.
Ahora, si queremos implementar una regla personalizada, podemos bloquear el envío del formulario mediante devolución de llamada o promesa.

Método de devolución de llamada

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

Pero, de hecho, promis es más controlable, porque la devolución de llamada debe llamarse eventualmente independientemente del proceso. Callback ('xxx' ') significa que la verificación no ha pasado, y callback () significa que la verificación ha pasado , pero si Agregue el atributo de hasFeedback, encontrará que siempre que la devolución de llamada sea √

Método de promesa

<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>