微信小程序實現添加銀行卡,銀行卡號每隔四位插入空格並展示時僅顯示前後四位,或者僅顯示後四位(超詳細)

 

首先我們先來看看銀行卡號在輸入的時候每隔四位自動插入空格的效果

實現代碼

wxml

<!-- 銀行卡 S -->
<view class="bank-card">
  <view class="bank-card-title">銀行卡</view>
  <view class="bank-card-inout">
    <view class="card-number">
      <view>卡號</view>
      <input type="number" placeholder="請輸入您持卡的銀行卡號" value="{{bankNumber}}" placeholder-style="color: #DDDDDD;" bindinput="getUserIdCardNumber"></input>
    </view>
    <view class="card-type">
      <view>卡類型</view>
      <view class="card-types">
        <image src="{{bankCardImg}}"></image>
        <block wx:if="{{cardType!=null}}">
          <view>{{cardType}}</view>
        </block>
      </view>
    </view>
  </view>
</view>
<!-- 銀行卡 E -->

wxss

/* 銀行卡 */
.bank-card {
  font-size: 28rpx;
  color: #000000;
  margin: 49rpx 20rpx 0;
}
.bank-card-title {
  margin-bottom: 29rpx;
}
.bank-card-inout {
  background: #FFFFFF;
  border-radius: 20rpx;
  height: 193rpx;
}

.card-number {
  display: flex;
  align-items: center;
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #EEEEEE;
}

.card-type {
  display: flex;
  align-items: center;
  padding: 25rpx 20rpx;
}

.card-number view:nth-child(1), .card-type view:nth-child(1) {
  width: 120rpx;
}

.card-types {
  display: flex;
  align-items: center;
}

.card-types image {
  width: 100rpx;
  height: 34rpx;
  margin-right: 16rpx;
}

js

Page({
    data:{
        bankNumber: "",
    },
    /**
   * 銀行卡號
   */
  getUserIdCardNumber: function(e) {
    var cards = e.detail.value;
    var cards = cards.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
    this.setData({
      bankNumber: cards
    })
  },
})

該效果就是以上所有代碼,下面我就以上頁面直接實現效果

先看效果

後四

cho: function() {
    var bankNumbers = this.data.bankNumbers.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "**** **** **** $2")
    console.log(bankNumbers)
    this.setData({
      bankNumbers: bankNumbers
    })
  },

前四後四 

cho: function() {
    var bankNumbers = this.data.bankNumbers.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "$1 **** **** **** $2")
    console.log(bankNumbers)
    this.setData({
      bankNumbers: bankNumbers
    })
  },

取出字符串所有的空格

var card = bankCard.replace(/\s|\xA0/g, "");

QQ羣: 1102727334