el-form遇到的坑，连续校验两次，一次true，一次false

记录一下开发时遇到的一个坑，vue3项目，UI组件使用的element-plus。 表单el-form点击提交按钮没有正常的执行请求，但是也没报错。打印valid发现连续出现了两次，一次true一次false。 一番查找之下发现是表单的validate回调函数里面有错误，但是element-plus把validate回调trycatch了，所以没有在console面板里打印错误信息，相关源码如下：

const validateField = async (modelProps = [], callback) => {
      const shouldThrow = !shared.isFunction(callback);
      try {
        const result = await doValidateField(modelProps);
        if (result === true) {
          callback == null ? void 0 : callback(result);
        }
        return result;
      } catch (e) {
        const invalidFields = e;
        if (props.scrollToError) {
          scrollToField(Object.keys(invalidFields)[0]);
        }
        callback == null ? void 0 : callback(false, invalidFields);
        return shouldThrow && Promise.reject(invalidFields);
      }
    };

回到我的问题，我之前的代码：

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let data = JSON.parse(JSON.stringify(ruleForm.value))
      data.responsibleIds = data.responsibleIds.join(',')
      data.warningIds = data.warningIds.join(',')
      addProject(data).then(res => {
        if (res.code == 200) {
          ElMessage.success("操作成功");
          router.push({ path: '/manageproject' })
        }
      })
    }
  })
}

其中responsibleIds不是必填项，所以有可能会是undefined，执行data.responsibleIds.join(',')就会报错，加上如下判断就好了

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let data = JSON.parse(JSON.stringify(ruleForm.value))
      if (Array.isArray(data.responsibleIds)) {
        data.responsibleIds = data.responsibleIds.join(',')
      }
      if (Array.isArray(data.warningIds)) {
        data.warningIds = data.warningIds.join(',')
      }
      addProject(data).then(res => {
        if (res.code == 200) {
          ElMessage.success("操作成功");
          router.push({ path: '/manageproject' })
        }
      })
    }
  })
}