ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

antd Form.Item不同验证规则用不同的触发方式实现重名校验

2021-07-22 17:03:34  阅读:539  来源: 互联网

标签:触发 return Form 校验 projectSpaceId Item let 接口 antd


需求:需要实现重名校验。

这个重名校验得调用后端的接口,但是我又不想在onChange的是偶触发自定义校验规则,这样会调用太多次接口,本来想用useRequest来实现debounce,发现不行,触发不了,然后用useDebounceFn,发现也不行,返回的数据是有问题的,返回的结果是上一次接口调用的结果,所以改成onBlur的时候触发校验规则,这样就会少调用几次接口,一开始是把

// validateTrigger={['onBlur']} 写在formItem的属性上的,发现会影响required:true的实时触发,所以改成了写在rules中,发现也是可以的,改成onSubmit的时候触发,既能让required在onChange的时候触发,又能保证自定义验证在onSubmit的时候触发。

 

       <FormItem
          label="数据集名称"
          name="logicName"
          // validateTrigger={['onSubmit']}
          rules={[
            {
              required: true,
            },
            {
              validateTrigger: ['onSubmit'],//写在这里也是可以的
              validator: async (_: any, value: string) => {
                let projectSpaceId = localStorage.getItem('indexSpaceId');
                if (!projectSpaceId) return;
                let params: Mydataset.registeredParams = {
                  dsName: value,
                  projectSpaceId: +projectSpaceId,
                };

                let res: any = await isRegistered(params);
                if (!res.obj) {
                  return Promise.resolve();
                }
                return Promise.reject('数据集名称有重复');
              },
            },
          ]}
        >
          <Input placeholder="请输入"></Input>
        </FormItem>

标签:触发,return,Form,校验,projectSpaceId,Item,let,接口,antd
来源: https://blog.csdn.net/u010856177/article/details/119003513

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有