最近項目中在登錄界面有一個需求凶朗，獲取手機(jī)驗證碼的時候瓷胧，不要求用戶填寫手機(jī)號，而是當(dāng)用戶輸入正確的用戶名棚愤、密碼搓萧、圖片驗證碼的時候，點擊“獲取驗證碼”宛畦，后臺調(diào)取該用戶的手機(jī)號瘸洛，給手機(jī)號發(fā)送手機(jī)驗證碼，用戶輸入正確的手機(jī)驗證碼以后次和，才能登錄反肋，（不要問我為什么要弄的這么麻煩，我也很想吐槽）踏施，這樣在點擊獲取驗證碼的時候石蔗，要校驗前三項的規(guī)則（是非為空、字段長度等）畅形。

點擊紅框养距，校驗前三項是否合法

在翻element-ui的文檔時，發(fā)現(xiàn)有部分校驗的方法：

validataField可以進(jìn)行部分校驗日熬，但好像只能一個個來

參數(shù)是要校驗的表單的props棍厌，以數(shù)組形式傳入，美滋滋的用上了竖席，沒想到好像有坑耘纱，三項傳入以后，在回調(diào)函數(shù)中發(fā)送獲取短信驗證碼的請求毕荐，沒想到validataField還是單獨對這幾個表單進(jìn)行驗證揣炕，這樣當(dāng)三項都合法時，發(fā)出了三次接口請求东跪？！

最后沒辦法只能一個個的寫了，最后實現(xiàn)的時候用promise.all來發(fā)送請求虽填。代碼：

      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);
        }
      );

雖然這樣代碼可能還是不夠簡潔丁恭，但暫時解決了問題，如果有更好的方式再更新吧斋日。