Validator校验器（解决多个异步检验）

Posted 2023-04-06

参考技术A

定义一个Validator校验器，可用于表单验证，但又与表单组件相互独立，参数提供“需要校验的数据”和“校验规则”，返回“校验结果”。（React+Typescript）
例如：(数据格式)

想在以上功能的基础上实现 自定义异步验证 ,
验证规则中加入一个validate，这里的validate函数通常会出现ajax异步请求：

其中， validate(value, resolve, reject) ，参数 value 是需要校验的数据，参数 resolve 是成功后需要执行的函数，参数 reject 是失败后需要执行的函数， reject 的参数就是校验结果的文字内容。

无论 Promise 里面执行的是 resolve 还是 reject ，返回给 after 的状态一定是fulfilled，那么 Promise.all([after1, after2]) 就会执行then里面的回调函数success ：

antd form表单validator 校验(4.17) 输入框一直是红色解决方法

参考技术A 使用 antd 的 validator 方法时 用 antd 官方提供的示例会 导致输入框一直是红色

改用以下写法就好了

```

rules=[

         

            validator: async function validator(_, value, callback)

              const res: any = await getCheckNumberUnique(value);//异步发送接口 给 后端进行校验

              if (res && res.data && res.data.code === 500)

                throw new Error('地图编号重复');//错误信息

              else

                callback();//恢复为蓝色框

             

            ,

          ,

        ]

```