表单多个输入框不为空---异步处理

先看下最终效果

我使用的是 vue-cli脚手架+elementUI搭建的项目
有想过分别条件判断，但是太复杂，没做出来，后来采用异步promise加上条件判断终于做出来了。
OK！上代码

html

<template>
    <div class="newAgency">
        <!-- 新建代理 -->
        <div class="blank">
            <el-row :span="24">
                <el-col :span="2"><div class="grid-content " style="borderRadius:4px 0 0 4px;borderRight:0">账号</div></el-col>
                <el-col :span="4"><el-input v-model="account" placeholder="最多32个字符"></el-input></el-col>
                <el-col :span="2"><div class="grid-content " style="borderRight:0;borderLeft:0">姓名</div></el-col>
                <el-col :span="4"><el-input v-model="name" placeholder="最多32个字符"></el-input></el-col>
                <el-col :span="2"><div class="grid-content "style="borderRight:0;borderLeft:0">密码</div></el-col>
                <el-col :span="5"><el-input v-model="password" placeholder="8位小写字母或数字"></el-input></el-col>
                <el-col :span="2"><div class="grid-content "style="borderRight:0;borderLeft:0">币种</div></el-col>
                <el-col :span="3"><div class="grid-content " style="borderRadius: 0 4px 4px 0;">RMB</div></el-col>
            </el-row>
        </div>
        <!-- 上限额度 -->
        <div class="blank">
            <el-row :span="24">
                <el-col :span="5"><div class="grid-content " style="borderRadius:4px 0 0 4px;borderRight:0">上限额度(人民币)</div></el-col>
                <el-col :span="19"><el-input v-model="max" ></el-input></el-col>
            </el-row>
        </div>
        <!-- 等级备注 -->
        <div class="blank">
            <el-row :span="24">
                <el-col :span="3"><div class="grid-content " style="borderRadius:4px 0 0 4px;borderRight:0">后台等级</div></el-col>
                <el-col :span="9"><div class="grid-content " >三级代理商</div></el-col>
                <el-col :span="3"><div class="grid-content ">备注</div></el-col>
                <el-col :span="9"><el-input v-model="remark"></el-input></el-col>
            </el-row>
        </div>
        <!-- 确定按钮 -->
        <div >
            <el-button type="primary"class="button" @click='makeAgency'>确定</el-button>
        </div>               
    </div>
</template>

js

<script>
export default {
  data() {
    return {
      account: "", //新建代理的账号
      accountTest: 0, //账号验证
      name: "", //姓名
      nameTest: 0, //姓名验证
      password: "", //密码
      passwordTest: 0, //密码验证
      max: "0", //上限额度
      remark: "" //备注
    };
  },
  methods: {
    //   确保账号不为空
    sureAccount() {
      if (this.account == "") {
        this.accountTest = 0;
      } else {
        this.accountTest = 1;
      }
      return Promise.resolve(this.accountTest);
    },
    // 确保姓名不为空
    sureName() {
      if (this.name == "") {
        this.nameTest = 0;
      } else {
        this.nameTest = 1;
      }
      return Promise.resolve(this.nameTest);
    },
    // 确保密码不为空
    surePassword() {
      let reg = /^[a-z]{8}|[0-9]{8}$/;
      if (this.password == "" || reg.test(this.password) == false) {
        this.passwordTest = 0;
      } else {
        this.passwordTest = 1;
      }
      return Promise.resolve(this.passwordTest);
    },
    //   确定新建代理
    makeAgency() {
        // 异步处理保证输入不为空
      this.sureAccount()
        .then(val => {
        //   console.log(val);
          return this.sureName();
        })
        .then(val => {
        //   console.log(val);
          return this.surePassword();
        })
        .then(val => {
        //   console.log(val);
          let arr = [];
          arr.push(this.accountTest);
          arr.push(this.nameTest);
          arr.push(this.passwordTest);
        //   console.log(arr);
          if (arr[0] == 0) {
            this.$alert("请输入账号", "提示", {
              confirmButtonText: "确定",
              callback: action => {}
            });
          } else if (arr[0] == 1 && arr[1] == 0) {
            this.$alert("姓名不能为空,并且不能大于32个字符", "提示", {
              confirmButtonText: "确定",
              callback: action => {}
            });
          } else if (arr[0] == 1 && arr[1] == 1 && arr[2] == 0) {
            this.$alert("密码为8位小写字母或数字", "提示", {
              confirmButtonText: "确定",
              callback: action => {}
            });
          }else if (arr[0] == 1 && arr[1] == 1 && arr[2] == 1) {
              console.log(1);        
          }
        }) .catch(val=>{});;
    }
  }
};
</script>

css

<style scoped>
.newAgency {
  margin: 0 auto;
  width: 700px;
  margin-top: 60px;
}
.grid-content {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.blank {
  margin-bottom: 20px;
}
</style>

可以直接用，可能比较菜，欢迎大神指点