vue3 rule校验调用接口的问题

Question

const rule = {
  bucketNameRules() {
    const valid = (rule, value) => {
      const reg = /^(?![-])[a-z0-9-]{3,63}(?<![-])$/
      if (value.length < 3 || value.length > 63) {
        return Promise.reject('请输入 3~63 个字符')
      } else if (!reg.test(value)) {
        return Promise.reject('允许小写字母、数字、短横线（-），且不能以短横线开头或结尾')
      }
    //调用接口查询是否重复
      bucketNameCheck({
        bucketName: value
      }).then((res) => {
        availableName.value = res.available
        if (availableName.value) {
          return Promise.resolve()
        } else {
          return Promise.reject('该Bucket已存在，或被其他用户占用')
        }
      })
    }
    return { validator: valid, trigger: 'change', required: true }
  }

最上面的两个return Promise是可以正常触发校验规则的
但是在调用接口里的then里面只会在控制台里打印，不会在页面上触发校验规则

请问如何解决？或者在rule之外有没有什么方法可以单独触发校验？

Answer 1

    const rule = {
        bucketNameRules() {
            const valid = (rule, value) =>
                new Promise((resolve, reject) => {
                    {
                        const reg = /^(?![-])[a-z0-9-]{3,63}(?<![-])$/;
                        if (value.length < 3 || value.length > 63) {
                            reject("请输入 3~63 个字符");
                        } else if (!reg.test(value)) {
                            reject("允许小写字母、数字、短横线（-），且不能以短横线开头或结尾");
                        }
                        //调用接口查询是否重复
                        bucketNameCheck({
                            bucketName: value,
                        }).then((res) => {
                            availableName.value = res.available;
                            if (availableName.value) {
                                resolve();
                            } else {
                                reject("该Bucket已存在，或被其他用户占用");
                            }
                        });
                    }
                });
            return { validator: valid, trigger: "change", required: true };
        },
    };