vant动态函数校验

简介: 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";
      }
    },
目录
打赏
0
0
0
0
3
分享
相关文章
|
10月前
|
在Vue中,如何编写自定义的验证规则?
在Vue中,如何编写自定义的验证规则?
126 1
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3521 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
Vue封装全局注册弹窗组件,实现全局调用。
前言 很多网站都会有权限控制,比如一些博客网站的评论系统,必须要用户登录后才能发起评论,如果未登录想要评论,网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出,所以这个弹窗组件我们就必须封装为共有的,共全局调用。
1598 0
|
6月前
|
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
338 10
|
7月前
|
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
179 59
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
8月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
427 1
|
10月前
|
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
612 0
|
10月前
|
js类型校验的方式
js类型校验的方式
68 1
vue模板语法上集->插值,指令,过滤器,计算属性&监听属性,vue购物车
vue模板语法上集->插值,指令,过滤器,计算属性&监听属性,vue购物车
55 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等