Vue手机号正则匹配姓名加密展示功能的实现

 更新时间:2022年08月22日 11:03:06   作者:HqL丶1024  
这篇文章主要介绍了Vue手机号正则匹配,姓名加密展示,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一丶手机号

(1)正则匹配

if (!/^1[3|4|5|6|7|8|9]\d{9}$/.test(13807999985)) {
    console.log(resultPhone);//138****9985

(2)substr截取

    var phone = "17610603529";
    var mphone = phone.substr(0, 3) + "****" + phone.substr(7);
    // 如果用 Es6 模板字符串的话,可以不用+号做拼接
    var phone = "17610603529";
    var mphone = `${phone.substr(0, 3)}****${phone.substr(7)}`;
    console.log(mphone);

二丶姓名

(1)substr 截取

activated() {
    console.log(this.formatName("王八肚")); // 王**
  },
  methods: {
    formatName(name) {
      let newStr;
      if (name.length === 2) {
        newStr = name.substr(0, 1) + "*"; // 通过substr截取字符串从第0位开始截取,截取1个
      } else if (name.length > 2) {
        // 当名字大于2位时
        let char = "";
        for (let i = 0, len = name.length - 2; i < len; i++) {
          // 循环遍历字符串
          char += "*";
        }
        newStr = name.substr(0, 1) + char + name.substr(-1, 1);
      } else {
        newStr = name;
      }
      return newStr;
    },
  },

到此这篇关于Vue手机号正则匹配姓名加密展示功能的实现的文章就介绍到这了,更多相关Vue手机号正则匹配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现单选和多选功能

    vue实现单选和多选功能

    这篇文章主要为大家详细介绍了vue实现单选和多选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue 实现从文件中获取文本信息的方法详解

    Vue 实现从文件中获取文本信息的方法详解

    这篇文章主要介绍了Vue 实现从文件中获取文本信息的方法,结合实例形式详细分析了vue.js基于export导出的文件信息读取相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • vue项目实现m3u8流媒体播放详细图文教程

    vue项目实现m3u8流媒体播放详细图文教程

    m3u8是一种常用的视频流媒体格式,通常用于在Web上播放视频,这篇文章主要给大家介绍了关于vue项目实现m3u8流媒体播放的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 通用vue组件化展示列表数据实例详解

    通用vue组件化展示列表数据实例详解

    组件化开发能大幅提高应用的开发效率、测试性、复用性等,下面这篇文章主要给大家介绍了关于通用vue组件化展示列表数据的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue中使用go()和back()两种返回上一页的区别说明

    vue中使用go()和back()两种返回上一页的区别说明

    这篇文章主要介绍了vue中使用go()和back()两种返回上一页的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • VUE表格显示错位的两种解决思路分享

    VUE表格显示错位的两种解决思路分享

    这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3.x对echarts的二次封装之按需加载过程详解

    vue3.x对echarts的二次封装之按需加载过程详解

    echarts是我们后台系统中最常用的数据统计图形展示,外界对它的二次封装也不计层数,这篇文章主要介绍了vue3.x对echarts的二次封装之按需加载,需要的朋友可以参考下
    2023-09-09
  • vue-以文件流-blob-的形式-下载-导出文件操作

    vue-以文件流-blob-的形式-下载-导出文件操作

    这篇文章主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue实现3D切换滚动效果

    vue实现3D切换滚动效果

    这篇文章主要为大家详细介绍了vue实现伪3D切换滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 简述vue状态管理模式之vuex

    简述vue状态管理模式之vuex

    这篇文章主要介绍了简述vue状态管理模式之vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论