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,
   // 點擊保存回調事件，input.getNumber()表明獲取當前輸入的號碼
   onBtnSaveClick: ()=>{
     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！！！