之前做电商类项目，难免会有用户输入银行卡的需求，常规的套路就是，在网上找一堆插件引入到项目里，之后再输入卡号，在选择对应的银行，如今又遇到了这个需求，于是刚好整理出一套代码，摒弃插件，一劳永逸，好了，废话不多说，直接上代码，呜啦...呜啦...呜啦...

一：初始化input输入框

<input class="input" type="text" placeholder-style="color:#e9ebed;" placeholder="请选择开户行" v-model="bankName">开户行
<input type="text" placeholder-style="color:#e9ebed;" placeholder="请输入银行卡号" v-model="cardNum" @input='cardNumInput'>

二：引入相应js文件（部分代码，如需源码，请留言）

//test url : https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=6222005865412565805&cardBinCheck=true
//cardType:DC->储蓄卡,CC->信用卡
function bankCardAttribution(bankCard){
  var cardTypeMap = {
    DC: "储蓄卡",
    CC: "信用卡",
    SCC: "准贷记卡",
    PC: "预付费卡"
  };
  function extend(target, source) {
    var result = {};
    var key;
    target = target || {};
    source = source || {};
    for (key in target) {
      if (target.hasOwnProperty(key)) {
        result[key] = target[key];
      }
    }
    for (key in source) {
      if (source.hasOwnProperty(key)) {
        result[key] = source[key];
      }
    }
    return result;
  }
  function getCardTypeName(cardType) {
    if (cardTypeMap[cardType]) {
      return cardTypeMap[cardType]
    }
    return undefined;
  }
  var bankcardList = [{
    bankName: "中国邮政储蓄银行",
    bankCode: "PSBC",
    patterns: [{
      reg: /^(621096|621098|622150|622151|622181|622188|622199|955100|621095|620062|621285|621798|621799|621797|620529|621622|621599|621674|623218|623219)\d{13}$/g,
      cardType: "DC"
    }, {
      reg: /^(62215049|62215050|62215051|62218850|62218851|62218849)\d{11}$/g,
      cardType: "DC"
    }, {
      reg: /^(622812|622810|622811|628310|625919)\d{10}$/g,
      cardType: "CC"
    }]
  }, {
    bankName: "中国工商银行",
    bankCode: "ICBC",
    patterns: [{
      reg: /^(620200|620302|620402|620403|620404|620406|620407|620409|620410|620411|620412|620502|620503|620405|620408|620512|620602|620604|620607|620611|620612|620704|620706|620707|620708|620709|620710|620609|620712|620713|620714|620802|620711|620904|620905|621001|620902|621103|621105|621106|621107|621102|621203|621204|621205|621206|621207|621208|621209|621210|621302|621303|621202|621305|621306|621307|621309|621311|621313|621211|621315|621304|621402|621404|621405|621406|621407|621408|621409|621410|621502|621317|621511|621602|621603|621604|621605|621608|621609|621610|621611|621612|621613|621614|621615|621616|621617|621607|621606|621804|621807|621813|621814|621817|621901|621904|621905|621906|621907|621908|621909|621910|621911|621912|621913|621915|622002|621903|622004|622005|622006|622007|622008|622010|622011|622012|621914|622015|622016|622003|622018|622019|622020|622102|622103|622104|622105|622013|622111|622114|622017|622110|622303|622304|622305|622306|622307|622308|622309|622314|622315|622317|622302|622402|622403|622404|622313|622504|622505|622509|622513|622517|622502|622604|622605|622606|622510|622703|622715|622806|622902|622903|622706|623002|623006|623008|623011|623012|622904|623015|623100|623202|623301|623400|623500|623602|623803|623901|623014|624100|624200|624301|624402|623700|624000)\d{12}$/g,
      cardType: "DC"
    }, {
      reg: /^(622200|622202|622203|622208|621225|620058|621281|900000|621558|621559|621722|621723|620086|621226|621618|620516|621227|621288|621721|900010|623062|621670|621720|621379|621240|621724|621762|621414|621375|622926|622927|622928|622929|622930|622931|621733|621732|621372|621369|621763)\d{13}$/g,
      cardType: "DC"
    }, {
      reg: /^(402791|427028|427038|548259|621376|621423|621428|621434|621761|621749|621300|621378|622944|622949|621371|621730|621734|621433|621370|621764|621464|621765|621750|621377|621367|621374|621731|621781)\d{10}$/g,
      cardType: "DC"
    }

三：逻辑代码

// 实时监听输入银行卡号
ardNumInput(){
    // 将空格替换成空  例:1111111  2222222 33333333333 格式化为1111111222222233333333333 
    let card=this.cardNum.replace(/\s+/g,"")
    // 将卡号替换成4位一空格  例:11112222333 格式化为1111 2222 3333  (用于开户行页面展示)
    this.cardNum=card.replace(/(\d{4})(?=\d)/g,"$1"+" ") 
    
    if( this.cardNum.length >= 6 ){
        let num=this.cardNum.replace(/\s+/g,"")
        // 如果输入的卡号与js文件中的银行名称对应，则返回银行名称
	    if(bankCardAttribution(num).bankName){
	        this.bankName=bankCardAttribution(num).bankName;
	    }
        }
    }

好啦，到这里自动匹配对应银行名称的功能就实现啦，是不是感觉很简单，赶快活动活动你的小手行动起来，亲自试一试吧，觉得好，别忘了点赞哟，污啦...污啦...污啦...