十六位银行卡格式化

介绍

通过正则表达式 内容格式化成银行卡号

实现思路

• 银行卡最经典的格式是16位带空格的展示方式

6214 8310 6138 7673

• 当我们输入 或者 获取值的时候 格式化成银行卡样式 就需要用到replace() (opens new window) 替换方法往里面去添加空格 这个方法可以通过字符串或者正则的方式 进行匹配后替换后 返回一个处理好的新字符串

String.replace(/(\d{4})(?=\d)/g, "$1 ");

• 格式化银行卡的正则表达式为:

/(\d{4})(?=\d)/g, "$1 "

• 校验16位银行卡的正则表达式为( 需要先去掉空格 ):

  // 正确16位银行卡正则(去除空格)
const rules = /^([1-9]{1})(\d{15}|\d{18})$/

• 通过 test() (opens new window) 方法检测正则表达式指定的字符串是否匹配 如果匹配就返回true 不符合就是返回false 所以通常我们通过! 取反来通过if判断是否不符合条件
• 判断前需要先去掉空格 .replace(/\s/g, "")

    // 去除银行卡空格 校验是否符合16位银行卡格式 (需要先去掉空格)
    if (!rules.test(card_number.replace(/\s/g, ""))) {
        console.error('错误银行卡');
    }

• 去掉字符串中的所有空格正则表达式为:

replace(/\s/g, "")

实现代码

整个流程: 用户输入时候插入空格 -> 校验是否符合16位银行卡格式(去空格) -> 检验是否只存在数字

• 在element ui中我们可以通过@chang事件来监听实现替换
• 一定要toString() (opens new window) 把原值转换成字符串 因为replace()方法 无法替换数字Number类型的
• 当我们验证银行卡的时候再把空格去掉 然后使用专门的16位银行卡正则去校验

	// 假设这是要格式化16位银行卡的内容
	const card_number = 6214831061387673
    // 进行格式化
    const cardNumberChange = card_number.toString().replace(/(\d{4})(?=\d)/g, "$1 ");

    // 16位银行卡格式正则表达式
    const rules = /^([1-9]{1})(\d{15}|\d{18})$/
    
    // 只能输入数字规则
    const rulseNumber = /(^-?[0-9][0-9]*(.[0-9]+)?)$/
  
    // 只能存在数字正则表达式
    
    // 去除银行卡空格 校验是否符合16位银行卡格式  (需要先去掉空格)
    if (!rules.test(card_number.replace(/\s/g, ""))) {
        console.error('错误银行卡格式');
    }
    
    //  去除银行卡空格 校验是否只存在数字  (需要先去掉空格)
      if (!rulseNumber.test(cardNumberChange.replace(/\s/g, ""))) {
   		console.error('输入的银行卡号只能包含数字');
      }