vue：输入电话号码，自动按3-4-4分割

吃茶去吖

于 2020-04-29 14:59:55 发布

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js vue

本文链接：https://blog.youkuaiyun.com/she_jw/article/details/105839878

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在Vue框架中实现手机号输入实时格式化的方案。通过监听输入框的值变化，采用正则表达式自动调整输入的手机号格式，确保用户输入的电话号码符合标准格式。当号码长度达到13位时，还会进行额外的验证和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

输入框绑定

<input class="inputBox" type="phone" placeholder=" 请输入手机号" maxlength="13" v-model="phoneNum"/>

监听事件，每次号码发生改变时触发
大体的逻辑是：先比较号码变化前后的长度，判断是输入还是删除，如果是输入的话，利用正则表达式改变号码格式。

  watch: {
    phoneNum (newValue, oldValue) { // 监听电话号码
      this.phoneNum = newValue.length > oldValue.length ? newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : this.phoneNum.trim()
      if (this.phoneNum.length === 13) {
      // 验证/保存的手机号码，去除空格
        this.state.checkPhoneNum = this.phoneNum.replace(/\s/g, '')
        console.log('输入的电话号码是：', this.state.checkPhoneNum)
      } 
    }
  },

效果示意
在这里插入图片描述