手机号分隔成344的格式

最新推荐文章于 2024-05-16 16:42:25 发布

RaeZhang

最新推荐文章于 2024-05-16 16:42:25 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js 文章标签：手机号分隔显示

本文链接：https://blog.youkuaiyun.com/RaeZhang/article/details/88887737

js 同时被 2 个专栏收录

18 篇文章

订阅专栏

前端

16 篇文章

订阅专栏

本文介绍如何实现手机号在input框中输入时，自动格式化为"xxx-xxxx-xxxx"的样式。通过监听input的onkeyup或onchange事件，在Element UI组件中使用input事件进行内容处理。

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

需求：在input框中输入手机号要求显示用空格分隔成 "xxx-xxxx-xxxx"的格式
解决方法:在 input 的上添加监听事件，如 onkeyup(原生input标签) 或 onchange(某些第三方组件)，对输入的内容进行处理再显示出来。
笔者采用的是Elemrnt UI 的 input 组件，监听事件为input

<el-input
	v-model="mobile"
	placeholder="请输入手机号"
	type="tel"
	clearable
	@input="validateMobile"
></el-input>

处理手机字符串的方法如下：

validateMobile(val) {
        let len=val.length;
        let reg = new RegExp("\\s","g");
        let mobile_ = "";
        let mobile=val;
        //去掉空格
        mobile = mobile.replace(reg,"");
        for(let i = 0;i < len;i++){
          if(i == 2||i == 6)
          {
            mobile_ = mobile_ + mobile.charAt(i) + " ";
          }
          else
          {
            mobile_ = mobile_ + mobile.charAt(i);
          }
        }
        this.mobile = mobile_;
      }