手机号隐藏中间四位数字方法

最新推荐文章于 2022-06-26 11:34:11 发布

飘走的落不离

最新推荐文章于 2022-06-26 11:34:11 发布

阅读量2k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/gebieren/article/details/106901116

版权

本文介绍如何在前端使用Vue.js实现手机号显示时隐藏中间四位数字，常用于表单和信息确认，以保护用户隐私。

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

隐藏手机号中间四位数字在表单的时候很常见，一些信息确认也是需要的，简单处理下：

<div id="app">
      <div class="validate">
        <input type="text" v-model="value" />
        手机号隐藏中间四位：<span>{{result}}</span><br />
        <br />
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          value: ''
        },
        computed: {
          result: function() {
            return this.phoneFormat(this.value);
          }
        },
        methods: {
          /**
          @param phoneNum 11位手机号
          @return 隐藏后的结果
          **/
          phoneFormat(phoneNum) {
            if (Number(phoneNum) && String(phoneNum).length === 11) {
              const mb = String(phoneNum);
              const reg = /^(\d{3})\d{4}(\d{4})$/;
              return mb.replace(reg, '$1****$2');
            } else {
              return phoneNum;
            }
          }
        }
      });
    </script>

效果图如下：