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

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

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

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

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

 

       <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>

上一篇:antd vue表格分页序号重置问题


下一篇:antd表单验证图片 必须上传