前端 - form表单验证问题，valid打印不出来，然后报错？

Question

form表单验证问题，valid打印不出来

saveDraft(nextFlag) {

  const datas = clone(this.formValidate);
  datas.omitFlag = datas.omitFlag ? 1 : 0;
  datas.irsName =
    datas.projSysList.map((item) => item.name).join("；") || "";
  datas.irsCode =
    datas.projSysList.map((item) => item.code).join("；") || "";

  const params = {
    ...datas,
    id: this.projectId,
    financialSource:
      datas.financialSource === "其他"
        ? this.ruleValidate.financialSource.value
        : datas.financialSource,
    projectCompanyCode:
      this.OrganizationListByName.find(
        (e) => e.organizationName === datas.projectCompany
      )?.organizationCode || "",
    coordinateCompany: datas.coordinateCompanyList
      .map((item) => item.value)
      .join("|"),
    historyProjectName: datas.historyProjectList
      ?.map((item) => item.value)
      .join("|"),
    projectProperty: datas.projectPropertyList.join("|"),
    buildType: datas.buildTypeList.join("|"),
  };
  if (nextFlag) {
    // 返回一个新的 Promise、
    return new Promise((resolve, reject) => {
      
      this.$refs.formValidate.validateField('budgetYear', (valid) => {
        console.log("测试验证结果:", valid);
        if (valid) {
          this.saveFlag = true;
          this.submitloading = true;
          saveProjectInfo(params)
            .then((res) => {
              resolve(res.data);
            })
            .catch((err) => {
              reject(err);
            })
            .finally(() => {
              this.submitloading = false;
            });
        } else {
          // 校验失败时也 resolve 或 reject，根据您的业务逻辑
          reject(new Error("表单校验未通过"));
          // 或者如果您想将校验失败视为正常流程：
          // resolve({ status: "validation_failed" });
        }
      });
    });
  } else {
    // 非 nextFlag 情况保持不变
    this.submitloading = true;
    return new Promise((resolve, reject) => {
      saveProjectInfo(params)
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        })
        .finally(() => {
          this.submitloading = false;
        });
    });
  }
},valid的没有值，然后会一直说校验未通过，改成数组就Uncaught (in promise) Error: [iView warn]: must call validateField with valid prop string!不知道该怎么解决了

Answer 1

已经解决了：
1.有v-if判断，需要先判断是否存在字段。
2.必须是字符串，不能是数组，例如：["name","age"]。

Answer 2

你的问题在于 validate 方法的用法错误：

• 正确的 API 应该是：

  • this.$refs.formValidate.validate(callback) - 验证整个表单
  • this.$refs.formValidate.validateField('budgetYear', callback) - 验证单个字段

解决方案

验证整个表单（推荐）

saveDraft(nextFlag) {
  // ... 你的数据处理逻辑 ...

  if (nextFlag) {
    return new Promise((resolve, reject) => {
      // 验证整个表单
      this.$refs.formValidate.validate((valid) => {
        console.log("测试验证结果:", valid);
        if (valid) {
          this.saveFlag = true;
          this.submitloading = true;
          saveProjectInfo(params)
            .then((res) => {
              resolve(res.data);
            })
            .catch((err) => {
              reject(err);
            })
            .finally(() => {
              this.submitloading = false;
            });
        } else {
          reject(new Error("表单校验未通过"));
        }
      });
    });
  } else {
    // ... 非 nextFlag 的逻辑 ...
  }
}

Answer 3

validate是校验整个表单吧，不支持传入字段名的
如果只校验budgetYear字段，应该有个 validateField 方法吧

this.$refs.formValidate.validateField('budgetYear', (valid) => {
  console.log(valid); // true / false
});