vue車牌號校驗和銀行校驗實戰(zhàn)

更新時間：2019年01月23日 09:15:48 作者：緋色璃

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

在看這篇文章之前，我建議大伙可以去把項目demo拉到本地看看。如果覺得寫得不好，可以一起提提issues，一起維護。或者大伙有剛需，可以留言，后期會不斷完善。

使用方法：

git clone https://github.com/13725102796/css3-demo.git
cd css3-demo
npm i (yarn install)
npm start

瀏覽器打開localhost: 8080 即可訪問

先談談車牌號的校驗。之前折騰了好久，網(wǎng)上文章也比較雜亂。后來無意中發(fā)現(xiàn)了一個比較好用的庫 ——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())
  } 
 });

下個案例 —— 銀行卡校驗

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

具體效果如下：

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 )

  });

具體業(yè)務邏輯還是要靠自己去寫。企業(yè)銀行要自行補充該卡的銀行名稱，獲取不了。

demo里面還有一個很唯美的輪播，如果能幫上大家的忙，別忘了給個star?。?！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue自定義鍵盤實現(xiàn)車牌號的示例代碼

Vue路由跳轉傳參或打開新頁面跳轉的方法總結
這篇文章主要給大家介紹了關于Vue路由跳轉傳參或打開新頁面跳轉的相關資料,在使用Vue.js開發(fā)單頁面應用時常常會遇到路由跳轉傳參的需求,需要的朋友可以參考下
2023-07-07
vue與ant-tree結合偽造懶加載并可以查詢
這篇文章主要為大家介紹了vue與ant-tree結合偽造懶加載并可以查詢實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點及其與目標或理想值的關系的圖表類型,它在顯示進度、完成率或其他類似度量時非常有用,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下
2024-06-06
Vue使用font-face自定義字體的案例詳解
@font-face?是?CSS?中的一個規(guī)則,它允許你加載服務器上的字體文件（遠程或者本地）,并在網(wǎng)頁中使用這些字體,本文給大家介紹了Vue使用font-face自定義字體的案例,并通過代碼講解的非常詳細,需要的朋友可以參考下
2024-03-03
一文詳解vue3項目實戰(zhàn)中的接口調用
在企業(yè)開發(fā)過程中,往往有著明確的前后端的分工,前端負責接收、使用接口,后端負責編寫、處理接口,下面這篇文章主要給大家介紹了關于vue3項目實戰(zhàn)中的接口調用的相關資料,需要的朋友可以參考下
2022-12-12
vue3+element-plus?Dialog對話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
vue3中如何用threejs畫一些簡單的幾何體
最近學習threejs有些時間了,就想著著手做些東西,下面這篇文章主要給大家介紹了關于vue3中如何用threejs畫一些簡單的幾何體的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-03-03
解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題
這篇文章主要介紹了解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
淺談Vue初學之props的駝峰命名
這篇文章主要介紹了淺談Vue初學之props的駝峰命名，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
淺談vue+vite項目部署會遇到的幾個問題
本文主要介紹了vue+vite項目部署會遇到的幾個問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04