vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
在看這篇文章之前，我建議大伙可以去把項(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ù)勡嚺铺?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！??！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-04-04
這篇文章主要介紹了vue 中 scoped 樣式作用域的規(guī)則，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue如何添加數(shù)組頁(yè)面及時(shí)顯示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐
在項(xiàng)目開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到表單保存的功能，本文主要介紹了v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-05-05
Vue+Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue注冊(cè)組件有這幾種，分別是全局注冊(cè)、局部注冊(cè)、在模塊系統(tǒng)中注冊(cè)，這篇文章主要介紹了Vue注冊(cè)組件的方法,需要的朋友可以參考下2022-08-08
Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue2.0使用v-for循環(huán)制作多級(jí)嵌套菜單欄
這篇文章主要介紹了vue2.0制作多級(jí)嵌套菜單欄,主要使用v-for循環(huán)生成一個(gè)多級(jí)嵌套菜單欄，這個(gè)方法應(yīng)用非常廣泛，需要的朋友可以參考下2018-06-06
vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫(xiě)
這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫(xiě),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法，文中通過(guò)示例為大家進(jìn)行了詳細(xì)的講解，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07