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手机号正则匹配内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue 计算属性之姓名案例的三种实现方法

    Vue 计算属性之姓名案例的三种实现方法

    目录 一.姓名案例-插值语法实现 二.姓名案例-methods实现 三.姓名案例-计算属性实现 四.计算属性简写 效果: 一.姓名案例-插值语法实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初识</title> <script type="text/javascript&qu

  • vue中手机号,邮箱正则验证以及60s发送验证码的实例

    今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中. <div> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button"

  • 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 模板字符串的

  • Vue ECharts实现机舱座位选择展示功能代码详解

    Vue ECharts实现机舱座位选择展示功能代码详解

    var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; $.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (

  • 正则匹配密码只能是数字和字母组合字符串功能【php与js实现】

    本文实例讲述了正则匹配密码只能是数字和字母组合字符串功能.分享给大家供大家参考,具体如下: 密码要求: 1. 不能全部是数字 2. 不能全部是字母 3. 必须是数字和字母组合 4. 不包含特殊字符 5. 密码长度6-30位的字符串 /** * @desc get_pwd_strength()im:根据密码字符串判断密码结构 * @param (string)$mobile * return 返回:$msg */ function get_pwd_strength($pwd){ if (strle

  • 基于vue+ bootstrap实现图片上传图片展示功能

    基于vue+ bootstrap实现图片上传图片展示功能

    效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

  • 一个好用的正则匹配电话号手机号邮箱网址的方法

    找到一个好用的正则匹配电话和手机号的方法,感谢,在这里分享一下,希望可以帮助更多人 匹配全部url地址和链接内容 复制代码 代码如下: $str = "<a href='http://www.baidu.com' target='_blank'>百度</a>http://www<a href='http://www.sina.com' target='_blank'>新浪</a>kod"; preg_match_all("/&l

  • 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e

  • Python正则匹配判断手机号是否合法的方法

    正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列匹配某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些匹配某个模式的文本. # 需求 # 定义一个函数,用于判断输入的手机号是否合法 # 并判断它的运营商 # 思路步骤: # 1.首先了解三大运营商的号段分布 # 2.获取用户输入内容 #

  • jQuery实现手机号正则验证输入及自动填充空格功能

    本文实例讲述了jQuery实现手机号正则验证输入及自动填充空格功能.分享给大家供大家参考,具体如下: 先来看看运行效果(在删除时连删即可): 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <inpu

  • vue实现浏览器全屏展示功能

    1.项目中使用的是sreenfull插件,执行命令安装 npm install --save screenfull 2.安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下: toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } 试了一

  • vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示

随机推荐