element多表单效验

33 阅读1分钟
this.formValidate(this.save()); // 先在点击事件中写出需要的回调

//     Object.keys(this.$refs):[
//   "baseForm",
//   "operationForm",
//   "kytlForm",
//   "qtkyForm"
// ]

// this.$refs[refName]:(3) [VueComponent, VueComponent, VueComponent]


// 多表单校验
formValidate(callback) {
  const forms = [];
  // 外层循环拿到ref的下标
  Object.keys(this.$refs).forEach(refName => {
  //内层循环遍历对应下标的循环表单,模版中在这个里循环了多个表单,故找到对应的form↓↓↓
    this.$refs[refName].forEach(form => {
    然后拿到效验返回值组成数组
      forms.push(form.validate());
    });
  });
  console.log("forms", forms); 
  // 这里是所有的效验函数 放进promiseall里, 
  // [true, true, true, true, true, true, true, true, true, true]
  Promise.all(forms).then((valids) => {
    console.log(valids);
     // [true, true, true, true, true, true, true, true, true, true]
    if (valids.every((valid) => valid)) callback();
  }).catch(error => {
    this.$notify({
      type: "error",
      title: "提示",
      message: "存在必填项未填写!"
    });
    console.error("error=>>", error);
  });
},

总体思想是将多表单的验证收集起来,用promise.all一起触发,all有个特点多个异步的函数如果有一个出现错误就会catch就提示错误请填写,都通过了就是then就直接通过验证