快捷導(dǎo)航

vue車(chē)牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)

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

這篇文章主要介紹了vue車(chē)牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在看這篇文章之前，我建議大伙可以去把項(xiàng)目demo拉到本地看看。如果覺(jué)得寫(xiě)得不好，可以一起提提issues，一起維護(hù)?；蛘叽蠡镉袆傂瑁梢粤粞?，后期會(huì)不斷完善。

使用方法：

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

瀏覽器打開(kāi)localhost: 8080 即可訪問(wèn)

先談?wù)勡?chē)牌號(hào)的校驗(yàn)。之前折騰了好久，網(wǎng)上文章也比較雜亂。后來(lái)無(wú)意中發(fā)現(xiàn)了一個(gè)比較好用的庫(kù) ——plate-number-input

就直接用來(lái)改造了。具體效果如下：

用法如下：

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

下個(gè)案例 —— 銀行卡校驗(yàn)

（注：銀行卡校驗(yàn)只能通過(guò)個(gè)人卡號(hào)的校驗(yàn)，企業(yè)卡號(hào)是無(wú)法校驗(yàn)，因?yàn)檎{(diào)用是支付寶校驗(yàn)的接口，企業(yè)只能做到校驗(yàn)號(hào)碼位數(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è)務(wù)邏輯還是要靠自己去寫(xiě)。企業(yè)銀行要自行補(bǔ)充該卡的銀行名稱，獲取不了。

demo里面還有一個(gè)很唯美的輪播，如果能幫上大家的忙，別忘了給個(gè)star?。。?/p>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue自定義鍵盤(pán)實(shí)現(xiàn)車(chē)牌號(hào)的示例代碼

相關(guān)文章

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