循环验证表单信息

1.需求

要求在提交申请时校验每个地址使用信息的必填项是否填写完整

2.最终效果

3.具体操作

      新增地址使用信息
      
        
        
            
              
            
            
              
            
          
        
      
      

const formRefs = ref(); // 表单ref

// 提交地址申请
const submitApply = () => {
  let promises = formRefs.value.map((item,index) => new Promise((resolve, reject) => {
    item.validate((valid, fields) => {
      if (!valid){ 
        reject(index);
      } else {
        resolve();
      }
    });
  }));

  Promise.all(promises).then(() => {
    saveContract('save').then(() => { // 申请地址
        applicationAddress().then((res) => {
          proxy.$message.success('申请成功');
        });
      });
    }).catch((ind) => {
      console.log("ind",ind);
      data.activeName = ind?ind:String(ind)
      ElMessage.error("请填写完整！")
    });
};

4.重点说明

（1）如何实现循环添加校验的

data.applyRegisteredAddressParams作为循环的数组，it作为具体数组元素的对象；需要在el-form标签上添加ref="formRefs"用来获取节点，model属性一定是绑定数组的元素（it）

（2）如何实现循环校验的

重点在于Promise.all()这个方法，Promise.all() 是一个 JavaScript 的内置函数，它接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 会在所有给定的 Promise 都成功完成时成功完成，或者在任何一个 Promise 失败时立即失败。

也就是我每一个用户都是一个Promise，每个Promise要么进入resolve（）成功方法或者进入reject（）失败方法。而Promise.all()这个方法要求所有的Promise都要进入成功方法后才会进入Promise.all()的成功方法（也就是进入then()），否则就会进入失败的方法（也就是catch()）