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