Vue.js中实现15位及16位不同类型信用卡卡号格式化的方法

问题原因 #

你当前使用的正则/(.{4})/g会匹配所有连续4位字符，哪怕是最后一组，替换后会在末尾多出一个空格，需要配合trim()去除。当输入16位卡号时，格式化后的内容加末尾空格总长度会暂时超过输入框maxlength="19"的限制，导致16位场景的格式化失效。

修复方案 #

改用带正向预查的正则，仅当4位数字后还有其他数字时才追加空格，不会产生多余末尾空格，天然兼容15位、16位卡号的格式化需求。

修改后完整代码 #

var app = new Vue({
  el: '#app',
  data: {
    card: ''
  },
  watch: {
    'card': function(newVal) {
      // 过滤非数字字符，最多保留16位信用卡号
      const pureNumber = newVal.replace(/[^0-9]/g, '').slice(0, 16)
      // 正向预查：仅4位数字后还有内容时才加空格
      this.card = pureNumber.replace(/(\d{4})(?=\d)/g, '$1 ')
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="card" maxlength="19">
</div>

可选优化（适配运通卡专有格式） #

如果你需要兼容15位美国运通卡的4位-6位-5位专属分段格式，可以在格式化前增加长度判断：

'card': function(newVal) {
  const pureNumber = newVal.replace(/[^0-9]/g, '').slice(0, 16)
  if (pureNumber.length === 15) {
    // 运通卡分段规则
    this.card = pureNumber.replace(/(\d{4})(\d{6})(\d{5})/, '$1 $2 $3')
  } else {
    // 普通卡4位分段规则
    this.card = pureNumber.replace(/(\d{4})(?=\d)/g, '$1 ')
  }
}

内容的提问来源于stack exchange，提问作者AJ Jones