微信小程序实现添加银行卡,银行卡号每隔四位插入空格并展示时仅显示前后四位,或者仅显示后四位(超详细)

叁歲伎倆 2023-02-22 04:00 98阅读 0赞

首先我们先来看看银行卡号在输入的时候每隔四位自动插入空格的效果

![20200701163557895.png][]

实现代码

wxml

<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>

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;
    }

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
        })
      },
    })

该效果就是以上所有代码,下面我就以上页面直接实现效果

先看效果

![20200701165333969.png][]

![2020070116534083.png][]

后四

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

[20200701163557895.png]: https://img-blog.csdnimg.cn/20200701163557895.png
[20200701165333969.png]: https://img-blog.csdnimg.cn/20200701165333969.png
[2020070116534083.png]: https://img-blog.csdnimg.cn/2020070116534083.png