elementUI中validateField对多个部分表单字段进行校验时多次回调问题的完美解决方案

在网上看到了他人的解决方案，发现他们的方案是不对的，他们只是单单解决了验证错误，却没有解决验证正确的情况下。

1.首先，我们得知道，使用validateField部分校验数组的时候，数组有几位，就会回调几次。当也就是空的时候，表示验证通过，回调返回为“ ”，所以就是，你校验几个规则，就会返回几个结果，如果通过就为“”（空）。

2.我们只需要定义一个数组

const validateFieldList= []

3.每当校验，就像数组中push该message值

validateFieldList.push(errorMsg) 

4.然后我们需要判断每个item是否为空，且该数组的长度是否等于你要校验值的个数。

if ( validateFieldList.length == 2 &&validateFieldList.every((item) => item === ""))

//这里的2为你要校验值的个数

//网上的其他方法错就错在这里，他们没有校验数组长度，从而第一次validateFieldList的每一项item就等于“”，从而并没有起到该有的效果。

 

5.最后贴上完整：

//这是登录按钮事件
    submitLoginForm(formName) {
      console.log("点击了登录")
      let validateFieldList= []
      this.$refs[formName].validateField(
        ["email", "password"],
        async (errorMsg) => {
          if (!errorMsg) {
            validateFieldList.push(errorMsg)
            if (validateFieldList.length == 2 && validateFieldList.every((item) => item === "")
            ) {
              // 之后的操作
              
            }
          } else {
            console.log("error submit!!")
            return false
          }
        }
      )
    },