关于react-antd里的表单的自定义校验

需求：输入11位手机号，自动校验这个手机号在不在数据库里面，因为只有在这个数据库里面的手机号才能被添加为管理员。如果这个手机号不在，，则底下则会提示该账号不存在或者存在异常。

 

 最开始我想的是在input标签里面加入onChange时间，但是用到了antd，本来就是校验功能，这个功能已经添加上了正则校验手机号的功能（用的antd的API），所以我想自定义校验的话应该也会有相应的API的。

 以下是官方文档截图：

以下是第一时间的代码

validator:(_,value) => {
    if(value.length === 11){
        let values = {
            ba_pbone = value
        }
         AccountListApi(values).then(res => {
            if(res.Status === 'success'){
                return    Promise.resolve()
            }eles{
                return    Promise.reject('账号存在异常')
            }
    
        })
    }
}

但是这样做无疑会出现问题，因为你请求也是promise类型的，再次返回一个Promise，只会让这个请求可以一直then下去，而外层是接收不到这个返回的。

所以，有了第二版：

validator:(_,value) => {
    let flag
    if(value.length === 11){
        let values = {
            ba_pbone = value
        }
         AccountListApi(values).then(res => {
            if(res.Status === 'success'){
                flag = true
            }eles{
                flag = flag
            }
    
        })

        if(flag){
            return    Promise.resolve()
        }eles{
            return    Promise.reject('账号存在异常')
        }
    }
}

这样的话，就是同步异步的问题了，期间我也是折腾了很久，知道最后，才发现我自己是多么的鱼唇。

直接放答案：

validator:async (_,value) => {
    let flag
    if(value.length === 11){
        let values = {
            ba_pbone = value
        }
         await AccountListApi(values).then(res => {
            if(res.Status === 'success'){
                flag = true
            }eles{
                flag = flag
            }
    
        })

        if(flag){
            return    Promise.resolve()
        }eles{
            return    Promise.reject('账号存在异常')
        }
    }
}