业务场景：
因为公司做的事海外业务，所以验证手机号码，要根据区号来验证，所以用到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"; } },
