vue 通过银行卡号查询银行类型和银行卡类型

小太阳呀！！

已于 2023-05-23 11:54:44 修改

阅读量1.3k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-05-23 11:53:00 首次发布

本文链接：https://blog.csdn.net/m0_52685922/article/details/130823671

版权

文章介绍了如何在Vue应用中获取和验证银行卡信息。首先，当成功获取卡信息时，返回的JSON对象包含银行名称和卡类型等。系统优先使用内置规则，若失败则借助支付宝API。在Vue项目中，通过安装并引入bankcardinfo插件，实现对银行卡号的失焦事件处理，进行银行名称的绑定和错误提示。

摘要由CSDN通过智能技术生成

一、说明

1. 成功获取卡信息是，返回值为json对象

{

    bankName:"中国工商银行",

    bankCode:"ICBC",

    cardType:"DC",

    cardTypeName:"储蓄卡"

}

2. 优先使用系统自带的获取卡bin信息（2013年国内银行卡集）

3. 当系统自带的规则获取不到卡bin时，会调用支付宝的接口来获取

测试地址如下：

https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=6227003320232234322&cardBinCheck=true

二、vue中具体使用

1. 安装插件

npm i bankcardinfo

2. 在mian.js中全局引入

// 根据输入的银行卡号判断所属银行
import getBankcardinfo from 'bankcardinfo'
Vue.prototype.$getBankcardinfo = getBankcardinfo

3.在页面中使用

传入卡号，卡号要求必须为数字！当第一个参数为空时，表示获取卡bin信息成功。

// 银行卡号失焦事件
    blurBankNum(num){
      this.$getBankcardinfo.getBankBin(parseInt(num), (err, data) => {
        console.log(err,'err')
        if (!err) {
          console.log(data)
          this.form.bankName = data.bankName
          this.vaildCarId = true
        }else{
          this.$message.error('银行卡号输入有误')
          this.form.bankName = ''
          this.vaildCarId = false
        }
      })
    },

data结果如下：