vue同步请求 + vant表单校验

1. Vue同步请求

async getIsoPersonInfo(id){
   await iso.queryIsoWorkerPersonInfo(id).then(res => {
      this.form = res.data;
      console.log(res)
   })
}

1. 方法名前面加async
2. 请求前面加await

2. Vant2 表单校验

2.1 全局校验

<van-field
        v-model="form.sjhm"
        name="sjhm"
        label="手机号码"
        placeholder="手机号码"
        :rules="[{ validator, message: '手机号码格式错误！'}]"
      />

rules里面必须为validator

// 自定义校验方法名必须叫 validator, 否则自定义校验不生效
    validator (val) {
      console.log("phone = " + val)
      if (val == null || val == ''){
        return true;
      }
      const phoneNotEmpty = /^1[3456789]\d{9}$/
      return phoneNotEmpty.test(val)
    },

1. validator写在vue的method里面
2. return true校验通过；return false校验不通过

2.1 自定义函数校验

     <van-field
        v-model="form.gldbh"
        name="gldbh"
        class="van-cell--required"
        label="隔离点编号"
        placeholder="隔离点编号"
        :rules="gldbhRule"
      >
        <template #right-icon>
          <van-icon v-show="success_show" name="passed" color="#1989fa" size="28px"/>
          <van-icon v-show="fail_show" name="close" color="red" size="28px"/>
        </template>
      </van-field>

gldbhRule放在data里面，具体如下

data() {
    return {
     success_show: false,
     fail_show: false,
     gldbhRule: [{      // 自定义规则函数校验
        required: true,
        message: "请输入11位或21位隔离点编号",
        trigger: "onChange",
      }, {
        validator: (value) => {
          var len = value.length
          if (len != 11 && len != 21) {
            this.success_show = false
            this.fail_show = false
            return false;
          }
          return true
        },
        message: "请输入11位或21位隔离点编号",
        trigger: "onChange"
      }, {
        validator: async (value) => {
          var code;
          await iso.isGldbhExsit(value).then(res => {
            code = res.code;
          })
          if (code == 0){
            this.success_show = true
            this.fail_show = false
            return true;
          }
          this.success_show = false
          this.fail_show = true
          return false;
        },
        message: "隔离点编号重复",
        trigger: "onChange"
      }]
    }
}