vue車牌號校驗和銀行校驗實戰(zhàn)
更新時間：2019年01月23日 09:15:48 作者：緋色璃
這篇文章主要介紹了vue車牌號校驗和銀行校驗實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在看這篇文章之前，我建議大伙可以去把項目demo拉到本地看看。如果覺得寫得不好，可以一起提提issues，一起維護(hù)?；蛘叽蠡镉袆傂?，可以留言，后期會不斷完善。
使用方法：
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ǎn)擊保存回調(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è)銀行要自行補(bǔ)充該卡的銀行名稱，獲取不了。
demo里面還有一個很唯美的輪播，如果能幫上大家的忙，別忘了給個star?。?！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的相關(guān)資料,在使用Vue.js開發(fā)單頁面應(yīng)用時常常會遇到路由跳轉(zhuǎn)傳參的需求,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時非常有用,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06
@font-face?是?CSS?中的一個規(guī)則,它允許你加載服務(wù)器上的字體文件（遠(yuǎn)程或者本地）,并在網(wǎng)頁中使用這些字體,本文給大家介紹了Vue使用font-face自定義字體的案例,并通過代碼講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
一文詳解vue3項目實戰(zhàn)中的接口調(diào)用
在企業(yè)開發(fā)過程中,往往有著明確的前后端的分工,前端負(fù)責(zé)接收、使用接口,后端負(fù)責(zé)編寫、處理接口,下面這篇文章主要給大家介紹了關(guān)于vue3項目實戰(zhàn)中的接口調(diào)用的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue3+element-plus?Dialog對話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
最近學(xué)習(xí)threejs有些時間了,就想著著手做些東西,下面這篇文章主要給大家介紹了關(guān)于vue3中如何用threejs畫一些簡單的幾何體的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
解決Vue的文本編輯器 vue-quill-editor 小圖標(biāo)樣式排布錯亂問題
這篇文章主要介紹了解決Vue的文本編輯器 vue-quill-editor 小圖標(biāo)樣式排布錯亂問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本文主要介紹了vue+vite項目部署會遇到的幾個問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04