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

最近项目中在登录界面有一个需求，获取手机验证码的时候，不要求用户填写手机号，而是当用户输入正确的用户名、密码、图片验证码的时候，点击“获取验证码”，后台调取该用户的手机号，给手机号发送手机验证码，用户输入正确的手机验证码以后，才能登录，（不要问我为什么要弄的这么麻烦，我也很想吐槽），这样在点击获取验证码的时候，要校验前三项的规则（是非为空、字段长度等）。

点击红框，校验前三项是否合法

在翻element-ui的文档时，发现有部分校验的方法：

validataField可以进行部分校验，但好像只能一个个来

参数是要校验的表单的props，以数组形式传入，美滋滋的用上了，没想到好像有坑，三项传入以后，在回调函数中发送获取短信验证码的请求，没想到validataField还是单独对这几个表单进行验证，这样当三项都合法时，发出了三次接口请求？！

最后没办法只能一个个的写了，最后实现的时候用promise.all来发送请求。代码：

      var promise1 = new Promise(function(resolve, reject) {
        self.$refs.form.validateField("userName", error => {
          if (!error) {
            resolve();
          } else {
            reject(error);
          }
        });
      });
      var promise2 = new Promise(function(resolve, reject) {
        self.$refs.form.validateField("passWord", error => {
          if (!error) {
            resolve();
          } else {
            reject(error);
          }
        });
      });
      var promise3 = new Promise(function(resolve, reject) {
        self.$refs.form.validateField("verificationCode", error => {
          if (!error) {
            resolve();
          } else {
            reject(error);
          }
        });
      });

      Promise.all([promise1, promise2, promise3]).then(
        () => {
          this.$axios
            .post("/sms_codes/", {
              username: this.form.userName,
              password: this.form.passWord,
              image_code: this.form.verificationCode
            })
            .then(res => {
              res = res.data;
              if (res.code == 1) {
                this.$message.success(res.data.message);
              }
            });
        },
        err => {
          this.$message.error(err);
        }
      );

虽然这样代码可能还是不够简洁，但暂时解决了问题，如果有更好的方式再更新吧。