在看這篇文章之前,我建議大伙可以去把項目demo拉到本地看看。如果覺得寫得不好,可以一起提提issues,一起維護。或者大伙有剛需,可以留言,后期會不斷完善。
使用方法:
git clone https://github.com/13725102796/css3-demo.git
cd css3-demo
npm i (yarn install)
npm start
瀏覽器打開localhost: 8080 即可訪問
先談談車牌號的校驗。之前折騰了好久,網上文章也比較雜亂。后來無意中發現了一個比較好用的庫 —— 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())
}
});
下個案例 —— 銀行卡校驗
(注: 銀行卡校驗只能通過個人卡號的校驗,企業卡號是無法校驗,因為調用是支付寶校驗的接口,企業只能做到校驗號碼位數)
具體效果如下:
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 ) });
具體業務邏輯還是要靠自己去寫。企業銀行要自行補充該卡的銀行名稱,獲取不了。
demo里面還有一個很唯美的輪播,如果能幫上大家的忙,別忘了給個star!!!