element-ui实现部分表单校验规则

错误写法——会执行三次请求

next () {
    this.$refs.form.validateField(['customer_name', 'ip', 'busy_name'] ,(Error) => {
           axios.post(regcode, data).then((res) => {
        })
    })
},

复杂写法

  next(){
      var promise1 = new Promise(function(resolve, reject) {
        this.$refs.form.validateField("customer_name", error => {
          if (!error) {
            resolve();
          } else {
            reject(error);
          }
        });
      });
      var promise2 = new Promise(function(resolve, reject) {
        this.$refs.form.validateField("ip", error => {
          if (!error) {
            resolve();
          } else {
            reject(error);
          }
        });
      });
      var promise3 = new Promise(function(resolve, reject) {
        this.$refs.form.validateField("busy_name", error => {
          if (!error) {
            resolve();
          } else {
            reject(error);
          }
        });
      });

      Promise.all([promise1, promise2, promise3]).then(
        () => {
          axios.post(regcode, data).then((res) => {
        })
        },
        err => {
          this.$message.error(err);
        }
      );
}

简便写法

next () {
    let isError = 0;
    this.$refs.form.validateField(['customer_name', 'ip', 'busy_name'] ,(Error) => {
        if (Error) {
            isError = 1;
        }
    })
    if (isError === 0) {
        //同时满足可操作
    }
},

望对大家有帮助

参考链接：

element-ui实现部分表单校验规则 - 简书

elementUI/ant design vue表单进行单个或部分字段验证校验 – 爱分享