vue iview 输入银行卡号匹配开户行

最新推荐文章于 2022-11-17 10:26:49 发布
最新推荐文章于 2022-11-17 10:26:49 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： 前端vue 文章标签： vue 银行卡号匹配银行类型 js iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T_Y_Y_T/article/details/102718964
版权

vue 文件中引用

<template>
    <!--建议用@on-change=""[可实时监听输入的每一个数字及所在银行匹配];@on-blur=""只能是移除框才触发-->
    <Input placeholder="银行卡号" v-model="preStoreUtils.cardNumber" @on-change="refoundNumber"></Input>
    <!--根据上面输入的银行卡号自动匹配所在银行，两者联用，可得到效果-->
    <Input placeholder="开户银行" v-model="preStoreUtils.openingBank" readonly></Input>
</template>

<script>
    //此步骤是为了 引入银行卡号类型匹配的工具类 目录以自己的文件目录为主
    import {
   bankCardAttribution} from '../../../../../libs/bankNoPatterns.js';
    export default {
   
        name: 'test',
        data () {
   
            return {
   
                preStoreUtils: {
   }
            };
        },
        watch: {
   
            //此步骤是为了更清楚的格式化银行卡号，每4位一个空格
            'preStoreUtils.cardNumber'(val) {
   
                this.$nextTick(() => {
   
                    this.preStoreUtils.cardNumber = val
                        .replace(/\D/g, '')
                        .replace(/....(?!$)/g, '$& ');
                });
            }
        },
        methods: {
   
            // 此步骤是银行卡号匹配银行类型的方法
            refoundNumber() {
   
                let number = this.preStoreUtils.cardNumber;
                let num = number.replace(/\s+/g, '');
                let obj = bankCardAttribution(num);
                if (obj === 'error') {
   
                    this.$Message.error('请输入正确的银行卡号！');
                } else {
   
                    this.preStoreUtils.openingBank = obj.bankName;
                }
            },
        }

    };
</script>

<style scoped>

</style>

银行卡类型判断工具类

//
// 版权所有：xxxxxx技术有限公司，2018
// 内容描述：<银行卡类型判断>
//  作者：王姣姣
//  创建时间：2019-07-15
//  版本          开发者            日期              描述
//  1.0.0.0      王姣姣           2019-07-15          新建
//
export 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'
        },
        {
   
            reg: /^(9558)\d{15}$/g,
            cardType: 'DC'
        },
        {
   
            reg: /^(370246|370248|370249|370247|370267|374738|374739)\d{9}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(427010|427018|427019|427020|427029|427030|427039|438125|438126|451804|451810|451811|458071|489734|489735|489736|510529|427062|524091|427064|530970|530990|558360|524047|525498|622230|622231|622232|622233|622234|622235|622237|622239|622240|622245|622238|451804|451810|451811|458071|628288|628286|622206|526836|513685|543098|458441|622246|544210|548943|356879|356880|356881|356882|528856|625330|625331|625332|622236|524374|550213|625929|625927|625939|625987|625930|625114|622159|625021|625022|625932|622889|625900|625915|625916|622171|625931|625113|625928|625914|625986|625925|625921|625926|625942|622158|625917|625922|625934|625933|625920|625924|625017|625018|625019)\d{10}$/g,
            cardType: 'CC'
        },
        {
   
            reg: /^(45806|53098|45806|53098)\d{11}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(622210|622211|622212|622213|622214|622220|622223|622225|622229|622215|622224)\d{10}$/g,
            cardType: 'SCC'
        }, {
   
            reg: /^(620054|620142|620184|620030|620050|620143|620149|620124|620183|620094|620186|620148|620185)\d{10}$/g,
            cardType: 'PC'
        }, {
   
            reg: /^(620114|620187|620046)\d{13}$/g,
            cardType: 'PC'
        }]
    }, {
   
        bankName: '中国农业银行',
        bankCode: 'ABC',
        patterns: [{
   
            reg: /^(622841|622824|622826|622848|620059|621282|622828|622823|621336|621619|622821|622822|622825|622827|622845|622849|623018|623206|621671|622840|622843|622844|622846|622847|620501)\d{13}$/g,
            cardType: 'DC'
        },
        {
   
            reg: /^(95595|95596|95597|95598|95599)\d{14}$/g,
            cardType: 'DC'
        },
        {
   
            reg: /^(103)\d{16}$/g,
            cardType: 'DC'
        }, {
   
            reg: /^(403361|404117|404118|404119|404120|404121|463758|519412|519413|520082|520083|552599|558730|514027|622836|622837|628268|625996|625998|625997|622838|625336|625826|625827|544243|548478|628269)\d{10}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(622820|622830)\d{10}$/g,
            cardType: 'SCC'
        }]
    }, {
   
        bankName: '中国银行',
        bankCode: 'BOC',
        patterns: [{
   
            reg: /^(621660|621661|621662|621663|621665|621667|621668|621669|621666|456351|601382|621256|621212|621283|620061|621725|621330|621331|621332|621333|621297|621568|621569|621672|623208|621620|621756|621757|621758|621759|621785|621786|621787|621788|621789|621790|622273|622274|622771|622772|622770|621741|621041)\d{13}$/g,
            cardType: 'DC'
        }, {
   
            reg: /^(621293|621294|621342|621343|621364|621394|621648|621248|621215|621249|621231|621638|621334|621395|623040|622348)\d{10}$/g,
            cardType: 'DC'
        }, {
   
            reg: /^(625908|625910|625909|356833|356835|409665|409666|409668|409669|409670|409671|409672|512315|512316|512411|512412|514957|409667|438088|552742|553131|514958|622760|628388|518377|622788|628313|628312|622750|622751|625145|622479|622480|622789|625140|622346|622347)\d{10}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(518378|518379|518474|518475|518476|524865|525745|525746|547766|558868|622752|622753|622755|524864|622757|622758|622759|622761|622762|622763|622756|622754|622764|622765|558869|625905|625906|625907|625333)\d{10}$/g,
            cardType: 'SCC'
        },
        {
   
            reg: /^(53591|49102|377677)\d{11}$/g,
            cardType: 'SCC'
        }, {
   
            reg: /^(620514|620025|620026|620210|620211|620019|620035|620202|620203|620048|620515|920000)\d{10}$/g,
            cardType: 'PC'
        }, {
   
            reg: /^(620040|620531|620513|921000|620038)\d{13}$/g,
            cardType: 'PC'
        }]
    }, {
   
        bankName: '中国建设银行',
        bankCode: 'CCB',
        patterns: [{
   
            reg: /^(621284|436742|589970|620060|621081|621467|621598|621621|621700|622280|622700|623211|623668)\d{13}$/g,
            cardType: 'DC'
        }, {
   
            reg: /^(421349|434061|434062|524094|526410|552245|621080|621082|621466|621488|621499|622966|622988|622382|621487|621083|621084|620107)\d{10}$/g,
            cardType: 'DC'
        },
        {
   
            reg: /^(436742193|622280193)\d{10}$/g,
            cardType: 'DC'
        },
        {
   
            reg: /^(553242)\d{12}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(625362|625363|628316|628317|356896|356899|356895|436718|436738|436745|436748|489592|531693|532450|532458|544887|552801|557080|558895|559051|622166|622168|622708|625964|625965|625966|628266|628366|622381|622675|622676|622677)\d{10}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(5453242|5491031|5544033)\d{11}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(622725|622728|436728|453242|491031|544033|622707|625955|625956)\d{10}$/g,
            cardType: 'SCC'
        }, {
   
            reg: /^(53242|53243)\d{11}$/g,
            cardType: 'SCC'
        }]
    }, {
   
        bankName: '中国交通银行',
        bankCode: 'COMM',
        patterns: [
            {
   
                reg: /^(622261|622260|622262|621002|621069|621436|621335)\d{13}$/g,
                cardType: 'DC'
            },
            {
   
                reg: /^(620013)\d{10}$/g,
                cardType: 'DC'
            },
            {
   
                reg: /^(405512|601428|405512|601428|622258|622259|405512|601428)\d{11}$/g,
                cardType: 'DC'
            },
            {
   
                reg: /^(49104|53783)\d{11}$/g,
                cardType: 'CC'
            }, {
   
                reg: /^(434910|458123|458124|520169|522964|552853|622250|622251|521899|622253|622656|628216|622252|955590|955591|955592|955593|628218|625028|625029)\d{10}$/g,
                cardType: 'CC'
            }, {
   
                reg: /^(622254|622255|622256|622257|622284)\d{10}$/g,
                cardType: 'SCC'
            }, {
   
                reg: /^(620021|620521)\d{13}$/g,
                cardType: 'PC'
            }]
    }, {
   
        bankName: '招商银行',
        bankCode: 'CMB',
        patterns: [{
   
            reg: /^(402658|410062|468203|512425|524011|622580|622588|622598|622609|95555|621286|621483|621485|621486|621299)\d{10}$/g,
            cardType: 'DC'
        },
        {
   
            reg: /^(690755)\d{9}$/g,
            cardType: 'DC'
        },
        {
   
            reg: /^(690755)\d{12}$/g,
            cardType: 'DC'
        }, {
   
            reg: /^(356885|356886|356887|356888|356890|439188|439227|479228|479229|521302|356889|545620|545621|545947|545948|552534|552587|622575|622576|622577|622578|622579|545619|622581|622582|545623|628290|439225|518710|518718|628362|439226|628262|625802|625803)\d{10}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(370285|370286|370287|370289)\d{9}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(620520)\d{13}$/g,
            cardType: 'PC'
        }]
    }, {
   
        bankName: '中国民生银行',
        bankCode: 'CMBC',
        patterns: [{
   
            reg: /^(622615|622616|622618|622622|622617|622619|415599|421393|421865|427570|427571|472067|472068|622620)\d{10}$/g,
            cardType: 'DC'
        }, {
   
            reg: /^(545392|545393|545431|545447|356859|356857|407405|421869|421870|421871|512466|356856|528948|552288|622600|622601|622602|517636|622621|628258|556610|622603|464580|464581|523952|545217|553161|356858|622623|625912|625913|625911)\d{10}$/g,
            cardType: 'CC'
        }, {
   
            reg: /^(377155|377152|377153|377158)\d{9}$/g,
            cardType: 'CC'
        }]
    }, {
   
        bankName: '中国光大银行',
        bankCode: 'CEB',
        patterns
最低0.47元/天 解锁文章
Janain
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
根据银行卡号自动的就匹配到它对应的银行
04-26
json数据里存储了所有的银行和他对应的卡号的前几位。然后那你用在调用这个json数据找到匹配的银行
银行卡实名认证_源码_API_文档
11-10
快速查询开户人姓名、开户银行卡号是否一致。银联实时联网核查，支持100多家国内外银行，极速出结果，100%准确。
阿里支付宝api对银行卡进行效验
yushun的博客
08-23 4447
验证银行卡是否正确可以使用阿里的免费验证接口，通过阿里支付宝api对银行卡进行效验(是否存在,卡号类型,归属行) 这三大类 https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo= 返回格式如下（需要输入完整卡号）： 直接上代码： import net.sf.json.JSONObject; import org.apache.commons.lang.StringUtils; im
手动输入，识别银行卡
qq_39584800的博客
01-22 1357
手输银行卡号自动识别出卡上的信息 在开发中遇到一个问题，有个需求是调用阿里的ocr识别银行卡，但是识别成功率很低，产品经理又临时加了一个识别失败时可手动输入银行卡号，当时一听直接懵逼。这怎么整？没办法只有硬着头皮整了， 终于天下不负有心人，方法还是让我找到了，有个免费的阿里api，https://ccdcapi.alipay.com/validateAndCacheCardInfo.json 可以...
校验银行卡是否有效, 获取所属行, 校验预留信息
lx_nhs的博客
02-13 3175
一. 校验银行卡是否有效以及所属行 支付宝的开放API, 银行卡校验接口 https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=6222005865412565805&cardBinCheck=true 直接放在浏览器url地址栏中便可以得到结果。 如果觉得返回信息不太理想, 可以参考下文中对结果封装的...
免费银行卡验证API接口
qq_20362199的博客
09-25 3280
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Xiazhiyu_whu/article/details/80391187 银行卡号校验接口api:需要传入的2个参数，卡号cardNo和cardBinCheck https://ccdcapi.alipay.com/validateA...
基于vue、iview实现可输入零件号、银行卡号等等
09-23
本项目专注于在Vue和iView环境下实现特定的输入功能，即创建一个可以限制输入位数并支持键盘左右切换的输入框，特别适用于输入如零件号或银行卡号等格式化的数据。 首先，我们需要理解Vue的基础概念。Vue通过声明式...
vue车牌号校验和银行校验实战
10-17
主要介绍了vue车牌号校验和银行校验实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
10-18
主要介绍了vue 格式化银行卡（信用卡）每4位一个符号隔断的问题，本文给大家分享了解决方法,需要的朋友可以参考下
vue iview实现动态路由和权限验证功能
08-27
Vue iView 实现动态路由和权限验证功能是一个关键的实践，尤其在开发企业级Web应用时，确保用户只能访问他们被授权的页面。本篇主要介绍如何在Vue框架结合iView UI库的情况下，构建这样的系统。 首先，动态路由分为...
vue项目中根据银行账号识别开户银行
shoping110的博客
11-17 1404
vue项目中使用bankcardinfo插件，根据银行账号识别开户银行；
vue表单验证--银行卡验证
huang_jimei的博客
04-02 2985
一、表单验证可以通过阿里的支付宝接口进行校验，能够准确识别是否存在，归属行： https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=1111&cardBinCheck=true //接口api:需要传入的2个参数，卡号cardNo和cardBinCheck 效果： 二、使用步骤 （1） <el-form-item label="银 行 账 号:" prop="bank_account"><el-inpu
根据银行卡号来获取银行名称-java
a1106900429的专栏
09-11 1万+
/** * 通过银行的Bin号 来获取 银行名称 * @author 一介草民 * */ public class BankUtil { public static void main(String[] args) { String cardNumber = "6210676802084484923";//卡号 String name = getNameOfBank(card
全国银行简码数据(JSON)
普通人一枚
04-16 3348
{ "ICBC": "中国工商银行", "ABC": "中国农业银行", "CCB": "中国建设银行", "CMB": "招商银行", "BOC": "中国银行", "PSBC": "中国邮政储蓄银行", "COMM": "交通银行", "CITIC": "中信银行", "CMBC": "中国民生银行", "CEB": "中国光大银行", "CIB": "兴业银行", "SPDB": "浦发银行", "GDB": "广发银行", "SPABANK".
java 根据银行卡号来获取银行名称
奋斗的小欣
11-21 1万+
原文地址：http://blog.csdn.net/a1106900429/article/details/48375031/** * 通过银行的Bin号 来获取 银行名称 * @author 一介草民 * */ public class BankUtil { public static void main(String[] args) { S
超好用的银行卡验证api
斜杠码农
12-08 576
https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=621423323&cardBinCheck=true
通过阿里接口查询银行卡信息
Guanisgod的博客
03-08 2601
接口： https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=4033920032360564&cardBinCheck=true 返回值 {“cardType”:“CC”,“bank”:“CITIC”,“key”:“1578711330566-3354-11.14...
银行卡号－ 查询银行卡信息
热门推荐
Beyond The Sky
06-15 2万+
工作中用到的一个功能，下面是用js实现的一个util。花了不少的时间折腾这个，把结果分享给大家。 (function() { //cardType:DC->储蓄卡,CC->信用卡 //var root = global; var cardTypeMap = { DC: "储蓄卡", CC: "信用卡", SCC: "
vue输入银行卡 每4位 加空格分隔
最新发布
09-03
在Vue中，输入银行卡号并让每4位数字之间添加空格分隔的方法如下： 1. 首先，在Vue的数据字段中定义一个变量用于存储输入的银行卡号，例如`bankCardNumber`。 2. 然后，在Vue的模板中使用`<input>`元素绑定该数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值