输入手机号格式344展示形式（只允许数字）

最新推荐文章于 2023-06-10 10:49:26 发布

原创

最新推荐文章于 2023-06-10 10:49:26 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何在项目中封装一个`telphone.js`混入，用于实现手机号码的344格式显示。内容包括手机号合法性验证的代码实现，以及在各个组件中的应用。

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

我的项目中有多出需要输入手机号，我封装mixins里telphone.js，控制手机号344展示格式，代码如下：


import {
   
    handlerPhone } from '@utils/Reg';
export const telphone = {
   
   
    data(){
   
   
        return {
   
   
            threephone: '',
            userInfo:{
   
   
            	phone 
            }
        }
    },
    watch: {
   
   
        threephone (newValue, oldValue) {
   
    // 监听电话号码
	        // 方法一
	        this.threephone = handlerPhone(newValue,oldValue) 
	        // 方法二
            // this.threephone = newValue.length > oldValue.length ? newValue.replace(/\D/g,'').replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : this.threephone.trim()
          if (this.threephone.length === 13) {
   
   
            // 验证/保存的手机号码，去除空格
            this.userInfo.phone = this.threephone.replace(/\s/g, '')
            // console.log('输入的电话号码是：', this.userInfo.phone)
          } 
        }
    },
}