vue的关于姓名文字，电话号码，身份证号码的打码隐藏的过滤器

最新推荐文章于 2023-09-29 09:45:00 发布

原创最新推荐文章于 2023-09-29 09:45:00 发布 · 2k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

vue 专栏收录该内容

37 篇文章

订阅专栏

这篇博客探讨了在Vue应用中如何实现姓名、电话号码和身份证号码的敏感信息保护。通过自定义过滤器，实现了不同长度文本的打码显示，确保用户隐私的安全。例如，姓名根据长度隐藏中间字符，电话号码显示前3位和后4位，身份证号码则隐藏中间4位。这些方法在前端开发中对于用户数据的隐私保护具有重要意义。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

vue的关于姓名文字，电话号码，身份证号码的打码隐藏的过滤器

1.关于姓名文字的打码显示

formatName (value) {
      if (!value) return '';
      let str = value;
      if(str.length == 2){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g , '$1*')
      }else if(str.length == 3){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g , '$1*$3')
      }else if(str.length == 4){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,2})([^\x00-\xff])/g , '$1**$3')
      }else if(str.length > 4){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,3})([^\x00-\xff])/g , '$1***$3')
      }else{}
      // str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{1,3})([^\x00-\xff])/g , '$1**$3')
      return str;
    }

2.电话号码打码显示

formatPhone (value) {
  if (!value) return '';
  let str = value;
  str = str.toString().replace(/^(\d{3})(\d{4})(\d{4})/g , '$1****$3')
  return str;
})

3.身份证号码的打码

formatIDcard (value) {
  if (!value) return '';
  let str = value;
  str = str.toString().replace(/^(.{6})(?:\w+)(.{4})$/ , '$1********$2')
  return str;
})

 hidden : function(str,frontLen,endLen) {    //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
		         var len = str.length-frontLen-endLen;
		         var xing = '';
		         for (var i=0;i<len;i++) {
		         xing+='*';
		        }
		         return str.substring(0,frontLen)+xing+str.substring(str.length-endLen);
		   }
       
       }