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 相关文章推荐
JS按字节截取字符长度实例
Nov 20 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
JS中的多态实例详解
Oct 15 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 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
php生成随机数或者字符串的代码
2008/09/05 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python能自学吗
2020/06/18 Python
python3中编码获取网页的实例方法
2020/11/16 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
神路信息Java面试题目
2013/03/31 面试题
詹天佑教学反思
2014/04/30 职场文书
市场开发计划书
2014/05/07 职场文书
党委班子对照检查材料
2014/08/19 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Python中Selenium对Cookie的操作方法
2021/07/09 Python