vue車牌號校驗和銀行校驗實戰

這篇文章主要介紹了vue車牌號校驗和銀行校驗實戰，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在看這篇文章之前，我建議大夥可以去把項目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

就直接用來改造了。具體效果如下：

用法如下：

npm i plate-number-input
　　
　　import PlateNumberInput from 'plate-number-input'
  
 const input = new PlateNumberInput({
  el: "#plateNumapp",
  defaultNumber: '默認號碼',
  isNewpower: false,
  // 
  onBtnSaveClick: ()=>{
　　　　　 // 點擊保存回調事件，input.getNumber()代表獲取當前輸入的號碼
 
   console.log(input.getNumber())
  } 
 });

下個案例 —— 銀行卡校驗

（注： 銀行卡校驗只能通過個人卡號的校驗，企業卡號是無法校驗，因爲調用是支付寶校驗的接口，企業只能做到校驗號碼位數）

具體效果如下：

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！！！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。