vue车牌号校验和银行校验实战


Posted in Javascript onJanuary 23, 2019

在看这篇文章之前,我建议大伙可以去把项目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

就直接用来改造了。具体效果如下:

vue车牌号校验和银行校验实战

用法如下:

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())
  } 
 });

下个案例 —— 银行卡校验

(注: 银行卡校验只能通过个人卡号的校验,企业卡号是无法校验,因为调用是支付宝校验的接口,企业只能做到校验号码位数)

具体效果如下:

vue车牌号校验和银行校验实战

vue车牌号校验和银行校验实战

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!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
Javascript typeof 用法
Dec 28 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
Vue实现简单的跑马灯
May 25 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 #Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 #Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 #Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 #Javascript
javascript json字符串到json对象转义问题
Jan 22 #Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 #Javascript
微信小程序实现九宫格抽奖
Apr 15 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP4实际应用经验篇(5)
2006/10/09 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
vue 中自定义指令改变data中的值
2017/06/02 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
python类定义的讲解
2013/11/01 Python
python实现删除文件与目录的方法
2014/11/10 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python如何实现定时器功能
2020/05/28 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
护士实习自我鉴定
2013/10/22 职场文书
电子信息工程自荐信
2014/05/26 职场文书
最美家庭活动方案
2014/08/31 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
升学宴家长致辞
2015/07/27 职场文书
会计岗位工作总结
2015/08/12 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
css3 文字断裂效果
2022/04/22 HTML / CSS