vue实战 - 车牌号校验和银行校验

栏目: 编程语言 · 发布时间: 5年前

内容简介:在看这篇文章之前,我建议大伙可以去把项目demo拉到本地看看。如果觉得写得不好,可以一起提提issues,一起维护。或者大伙有刚需,可以留言,后期会不断完善。使用方法:先谈谈车牌号的校验。之前折腾了好久,网上文章也比较杂乱,后来无意中发现了一个比较好用的库 —— plate-number-input

在看这篇文章之前,我建议大伙可以去把项目demo拉到本地看看。如果觉得写得不好,可以一起提提issues,一起维护。或者大伙有刚需,可以留言,后期会不断完善。

使用方法:

git clone https://github.com/13725102796/css3-demo.git

   cd css3-demo

   npm i  (yarn install)

   npm start 

  浏览器打开localhost: 8080 即可访问

先谈谈车牌号的校验。之前折腾了好久,网上文章也比较杂乱,后来无意中发现了一个比较好用的库 —— plate-number-input

就直接用了。具体效果如下:

vue实战 - 车牌号校验和银行校验

用法如下:

复制代码

npm i plate-number-input

import PlateNumberInput from 'plate-number-input'

const input = new PlateNumberInput({
   el: "#plateNumapp",
   defaultNumber: '默认号码',
   isNewpower: false,
   // 点击保存回调事件,input.getNumber()代表获取当前输入的号码
   onBtnSaveClick: ()=>{
     console.log(input.getNumber())
   }

});

复制代码

下个案例 —— 银行卡校验

(注: 银行卡校验只能通过个人卡号的校验,企业卡号是无法校验,因为调用是支付宝校验的接口,企业只能做到校验号码位数)

具体效果如下:

vue实战 - 车牌号校验和银行校验

vue实战 - 车牌号校验和银行校验

npm i bankcardinfo

import BIN from "bankcardinfo";

BIN.getBankBin(this.form.bank_account)

.then(data => {
      console.log(data);
      if(data.bankName){
         console.log(data.bankName + data.cardTypeName)
      }
    })
    .catch(err => {
      let errMsg = (err.split(':')[1]).split(',')[0]
      console.log(errMsg )
    });

具体业务逻辑还是要靠自己去写。企业银行要自行补充该卡的银行名称,获取不了。

demo里面还有一个很唯美的轮播,如果能帮上大家的忙,别忘了给个star!!!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Zen of CSS Design

The Zen of CSS Design

Dave Shea、Molly E. Holzschlag / Peachpit Press / 2005-2-27 / USD 44.99

Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to......一起来看看 《The Zen of CSS Design》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具