VUE Element-ui输入手机号加横线（三四四）或增加空格

最新推荐文章于 2022-12-08 16:23:22 发布

API搬运工

最新推荐文章于 2022-12-08 16:23:22 发布

阅读量4.8k

点赞数 3

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_29091239/article/details/86509270

版权

前端基础专栏收录该内容

51 篇文章 1 订阅

订阅专栏

一、问题描述：

项目中需要用到手机号每添加后增加空格或增加横线。三四四的逻辑。那么，在vue，element-ui 组件中，如何实现呢。

二、效果图：

三、实现代码：

 <template slot="mobile">
    <el-input v-model="obj.mobile" placeholder="请输入手机号" @blur="checkRepeat" v-on:input="validateMobile"></el-input>
 </template>

 validateMobile (val) {
      if (val.length < 13) {
        if (val.length > 3 && val.length < 7) {
          val = val.replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{3})(?=\d)/g, '$1 ')
        } else if (val.length >= 7) {
          val = val.replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{4})(?=\d)/g, '$1 ')
        }
        this.$set(this.obj, 'mobile', val)
      }
 }

四、思路：

1、在组件的el-input标签中添加input事件的监听，change事件是对el-input的事件，会在blur事件后触发，所以要用input事件。

2、正则处理 val = val.replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{3})(?=\d)/g, '$1 ')

3、set方法。

ps: 觉得还是空格会好些，提交数据时trim下就可以，产品的逻辑是留下横线。。。。