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判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
js表单登陆验证示例
Oct 19 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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中计算时间差的几种方法
2009/12/31 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
JS实现点击下载的小例子
2013/07/10 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python 流程控制实例代码
2009/09/25 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
教师自我鉴定范文
2013/11/10 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
购房协议书范本
2014/10/02 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
军训新闻稿范文
2015/07/17 职场文书