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ù)勡嚺铺柕男ｒ?。之前折騰了好久，網(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: '默認(rèn)號碼',
isNewpower: false,
//
onBtnSaveClick: ()=>{
// 點擊保存回調(diào)事件，input.getNumber()代表獲取當(dāng)前輸入的號碼
console.log(input.getNumber())
}
});
下個案例 —— 銀行卡校驗
（注： 銀行卡校驗只能通過個人卡號的校驗，企業(yè)卡號是無法校驗，因為調(diào)用是支付寶校驗的接口，企業(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è)務(wù)邏輯還是要靠自己去寫。企業(yè)銀行要自行補充該卡的銀行名稱，獲取不了。
demo里面還有一個很唯美的輪播，如果能幫上大家的忙，別忘了給個star?。?！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本文給大家介紹了在vue項目中使用svg圖標(biāo)的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-04-04
這篇文章主要介紹了vue 中 scoped 樣式作用域的規(guī)則，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue如何添加數(shù)組頁面及時顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在項目開發(fā)中，我們經(jīng)常會遇到表單保存的功能，本文主要介紹了v-for中動態(tài)校驗el-form表單項的實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-05-05
Vue+Echarts實現(xiàn)繪制動態(tài)折線圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實現(xiàn)繪制動態(tài)折線圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue注冊組件有這幾種，分別是全局注冊、局部注冊、在模塊系統(tǒng)中注冊，這篇文章主要介紹了Vue注冊組件的方法,需要的朋友可以參考下2022-08-08
Vue結(jié)合leaflet實現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實現(xiàn)克里金插值，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue2.0使用v-for循環(huán)制作多級嵌套菜單欄
這篇文章主要介紹了vue2.0制作多級嵌套菜單欄,主要使用v-for循環(huán)生成一個多級嵌套菜單欄，這個方法應(yīng)用非常廣泛，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法，文中通過示例為大家進行了詳細(xì)的講解，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07