银行卡四位一空格，输入格式校验，解决删除光标自动后置问题

需求：输入银行卡的时候，四位一空格显示。

后自测的时候，到中间段回删或者插入的时候，删一个会自动重新校正光标后置，体验很差，昨天试了半天，今天早上来修好。

上代码。

      <input class="cardInput" v-model="cardNumShow" @keyup="showNum" @blur="chargeNum" ref="cardInput">

keyup事件监测数值变化，实时切四位加空格，用的是正则

双向绑定的数据cardNumShow显示的是格式校验后的数据，另外存了一个无空格的cardNum给后台传参。

blur失焦的时候再次校验一次格式，弥补的是中间段回删和插入触发keyup事件扰乱光标位置的问题。（昨天试了下支付宝里面的添加银行卡的功能，发现输入做修改之后，格式不会再校验，会出现 62 2 123 444 512 1111 这种尴尬的格式）

废话少说。上代码。

export default {
  name: 'seller',
  data () {
    return {
      cardNum: '', // 银行卡-传给后台去空格
      cardNumShow: '' // 银行卡四位一空显示
    }
  },
  methods: {
    showNum () {
      let cInput = this.$refs.cardInput
      if (cInput.selectionStart < this.cardNumShow.length) {
        return
      }
      this.cardNumShow = this.cardNumShow.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
      this.cardNum = this.cardNumShow.replace(/\s/g, '')
    },
    chargeNum () {
      this.cardNumShow = this.cardNumShow.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
      this.cardNum = this.cardNumShow.replace(/\s/g, '')
    }
  }
}

自测后OK。