vant动态函数校验

业务场景：

因为公司做的事海外业务，所以验证手机号码，要根据区号来验证，所以用到vantUI的validator来验证

---

使用：

      <div class="flex">
        <label>公司電話</label>
        <div>
          <div class="select-flex">
            <el-select
              @change="getHouseNumber"
              placeholder="請選擇"
              class="select-phone"
              v-model="datas.office_Coun_code"
            >
              <el-option
                v-for="item in areaCode"
                :key="item.areaCode"
                :value="item.areaCode"
                type="number"
                :label="item.areaCode"
              >
              </el-option>
            </el-select>
            <van-field
              type="number"
              :rules="[
                {
                  
                  validator: validateHouseNumber,
                  message: houseNumberMessage,
                },
              ]"
              v-model="datas.office_tel"
              class="field-phoneNumber"
            />
          </div>
        </div>
      </div>

 methods中的方法

 

    validateHouseNumber(value, rule) {
      if (value) {
        // return true;
        if (this.datas.selectHouseNumber === "+852") {
          return /^\d{8}$/.test(value);
        } else if (this.datas.selectHouseNumber === "+853") {
          return /^\d{8}$/.test(value);
        } else if (this.datas.selectHouseNumber === "+86") {
          return /^\d{11}$/.test(value);
        }
      }
      return true;
    },

---

补充：动态文本我是写在@chang()方法里面

     /**
     * 家庭电话正则
     */
    getHouseNumber() {
      if (this.datas.office_Coun_code === "+852") {
        this.houseNumberPattern = /^\d{8}$/;
        this.houseNumberMessage = "Please enter 8 valid home phone numbers";
      } else if (this.datas.office_Coun_code === "+853") {
        this.houseNumberPattern = /^\d{8}$/;
        this.houseNumberMessage = "Please enter 8 valid home phone numbers";
      } else if (this.datas.office_Coun_code === "+86") {
        this.houseNumberPattern = /^\d{11}$/;
        this.houseNumberMessage = "Please enter 11 valid home phone numbers";
      }
    },