表单自定义验证规则—名称重复时提醒并且禁止提交

没有内容时提示：请输入申请名称，有内容但名称重复时提示已存在

 <Form.Item
              name="name"
              label="申请名称"
              // validateStatus={this.state.validateValue ? 'success' : 'error'}
              // // validateStatus="error"
              // // help={this.state.validateStatus === 'success' ? '' : '申请名称重复'}
              // help={this.state.validateValue ? '' : '申请名称已存在'}
              validateTrigger="onBlur"
              rules={[
                {
                  required: true,
                  message: '请输入申请名称',
                },
                {
                  max: 128,
                  message: '名称不超过128个字符',
                },
                {
                  pattern: new RegExp(/^[a-zA-Z_\u4E00-\u9FA5/-]([\w\u4E00-\u9FA5-]+){0,}?$/, 'g'),
                  message:
                    '名称字母、横线、下划线或中文开头，可包含字母、横线、下划线、数字、中文，不能为纯数字',
                },
                {
                  validator: (rule, value, callback) => {
                    this.checkName(value).then((res) => {
                      if (res) {
                        // console.log(33, res)
                        if(this.state.submitName) {
                          callback('申请名称已存在');
                        }
                        callback();
                      } else {
                        callback();
                      }
                    });
                  },
                },
              ]}
            >
              <Input value={this.state.submitName} onChange={this.nameValue} />
            </Form.Item>

方法

checkName = (value) => {
    // 这个是rules自定义的验证方法
    return new Promise((resolve, reject) => {
      // 返回一个promise
      getAllPackageName({ packageName: value })
        .then((res) => {
          // 这个是后台接口方法
          if (res) {
            console.log(11, res);
            resolve(res);
          } else resolve(false);
        })
        .catch((error) => {
          reject(error);
        });
    });
  };