【React】antd自定义验证表单从后台拉取数据

最新推荐文章于 2024-05-14 14:35:02 发布

业火之理

最新推荐文章于 2024-05-14 14:35:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/yehuozhili/article/details/90732203

React 专栏收录该内容

72 篇文章

订阅专栏

本文探讨了在Ant Design中如何使用表单控件验证数据库内容，特别关注于用户名唯一性的实时验证。通过实例讲解了如何避免onblur事件的延迟判定问题，并提供了自定义验证函数与fetch API结合使用的完整代码示例。

使用场景

使用antd表单控件验证后台数据库中内容从而返回验证结果。
以验证用户名是否存在在数据库中为例。

代码收获

博主一开始写了个onblur事件去后台验证用户名，根据结果来改变state的值从而让验证器判断state里的值进行验证，然后就发现有很严重的问题，就是延迟判定。onblur在移开鼠标时候进行拉取数据，实际上这时候验证器已经验证结束。这样导致达不到验证效果。
熟悉ui控件的验证规则和熟悉各个场景用什么样方法实现比较重要，不然容易浪费太多时间。

jsx代码中加入validator绑定自定义函数

            <Form.Item >
              {getFieldDecorator('email', {
                rules: [
                  {
                    type: 'email',
                    message: '请输入邮箱格式',
                  },
                  {
                    required: true,
                    message: '请输入邮箱',
                  },
                  {
                    validator:this.validfunc
                  }
                ],
              })(<Input  prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="请输入邮箱"/>)}
            </Form.Item>

自定义函数拉取数据

       validfunc=(rule,value,callback)=>{   
          const sendobj={username:value}
          console.log(JSON.stringify(sendobj));
          fetch(valiurl,{
            method:'post',
            headers:{
              'Content-Type': 'application/json'
          },
            body:JSON.stringify(sendobj)
          }).then((res)=>(res.text())).then((data)=>{
            if(data==='duplicate'){
              callback("此用户名已注册")
            }else{
              callback()
            }
          })
      }