微信小程序用wxs实现手机号码用****代替

页面结构

创建了verify.wx文件

verify.wxs

/**
 * 处理字符串为*格式, 中间显示自定义*号
 * str 需要处理的字符串
 * startLength 前面显示的字符串长度
 * endLength后面显示的字符串长度
 */
 
var verify = function(str, startLength, endLength) {
  if(str.length == 0 || str == undefined) {
    return "";
  }
  var length = str.length;
  if(length >= startLength + endLength) {
    // 判断当字符串长度为二时, 隐藏末尾
    if(length === 2) {
      return str.substring(0, 1) + '*';
    }
    else if(3 <= length && length <= 10) {
      return str.substring(0, 1) + '**';
    }
    // 判断字符串长度大于首尾字符串长度之和时, 隐藏中间部分
    else if(length >= 11) {
      return str.substring(0, startLength) + '****' + str.substring(length - endLength, length);
    } else {
      return str
    }
  }
}
 
module.exports = {
  verify: verify
}

在wxml中引用

<wxs module="tools" src="../../wxs/verify.wxs"></wxs>
<view class="li-phone">
   <input type="number" placeholder="请输入手机号码" value="{{tools.verify(phone, 3, 4)}}" maxlength="11"/>
   <view class="li-send">发送验证码</view>
</view>

在js中定义的字符串

/**
   * 页面的初始数据
   */
  data: {
    phone:"13245252432"
  },

效果展示