react + antd form表单验证自定义验证validator根据后台接口判断验证

有时候表单中的某些字段是需要调用后台接口验证,比如账号,ID之类的.这时候页面需要根据后台返回结果提示

复制代码
  // 验证账号是否已经被添加过
  const checkAccount = (value: string | number) => { // 这个是rules自定义的验证方法
    return new Promise((resolve, reject) => {  // 返回一个promise
      checkedAccount({ account: value }).then(res => { // 这个是后台接口方法
        if (res.responseCode === '000000') {
          console.log(11, res.data)
          resolve(res.data)
        } else resolve(false)
      }).catch(error => {
        reject(error)
      })
    })
  }

 <FormItem
     name='account'
     label='账号'
     rules={[
     { required: true, message: '请输入账号!' },
     {
        validator: (rule, value, callback) => {
          checkAccount(value).then(res => {
             if (res) {
                 // console.log(33, res)
                  callback()
              } else {
                  callback('账号已存在')
                      }
               })
         },
      },
      ]}
 >
   <Input placeholder='' />
 </FormItem>
复制代码

 

posted @   潇湘羽西  阅读(9345)  评论(0编辑  收藏  举报
编辑推荐:
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
阅读排行:
· 2000 Star,是时候为我的开源项目更新下功能了
· 好消息,在 Visual Studio 中可以免费使用 GitHub Copilot 了!
· 基于.NET WinForm开发的一款硬件及协议通讯工具
· 工作中这样用MQ,很香!
· 使用 .NET Core 实现一个自定义日志记录器
点击右上角即可分享
微信分享提示