vue中Element-ui 输入银行账号每四位加一个空格的实现代码


Posted in Javascript onSeptember 14, 2018

一、问题描述:

    我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格。那么,在vue,element-ui 组件中,如何实现呢?

二、效果图:

vue中Element-ui 输入银行账号每四位加一个空格的实现代码

三、实现代码:

<el-table-column prop="account" label="银行账号">
  <template slot-scope="scope">
   <el-input type="text" maxlength="23" v-model="scope.row.account" placeholder="请输入银行账号"   
     @change="validateNum(scope.$index)"></el-input>
  </template>
</el-table-column>
// 输入银行卡号
 validateNum (index) {
  this.setNum(this.supplierObjs.supplierBankAccount, index)
 },
// 设置银行卡号,每四位添加一个空格
 setNum (data, index) {
  data.forEach((element, i) => {
  element.account = element.account.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
  this.$set(element, 'account', element.account)
  })
 },

四、思路:

   1、在组件的change事件中添加实现方法(因为我们的业务需求是可以添加多个银行卡号,所以用index做了区分),取出每行的值;

   2、用element.account = element.account.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 '),类似正则表达式的方法对数据进行处理;

   3、this.$set(element, 'account', element.account),set方法,将处理后的值set到model中,处理后的数据就保存到model中了。

         实现起来也非常简单,但是因为element-UI没有提供输入设置的方法,所以需要自己根据需求完善一下。

补充:下面看下js 填写银行卡号时,每4个数字用空格隔开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script src="js/jQuery.js"></script>
</head>
<body>
  <script>
  var num = 0;
  function inputAccount(){
   var str = $('#bankCard').val();
   var elem = document.getElementById("bankCard");
   console.log(elem);
   if(str.length > num){
     var c = str.replace(/\s/g, ""); 
     if(str != "" && c.length > 4 && c.length % 4 == 1){
      $('#bankCard').val(str.substring(0, str.length - 1)+ " " + str.substring(str.length - 1, str.length));
     }
   }
   if(elem.setSelectionRange){//W3C
      setTimeout(function(){
        elem.setSelectionRange(elem.value.length,elem.value.length);
        elem.focus();
      },0);
    }else if(elem.createTextRange){//IE
      var textRange=elem.createTextRange();
      textRange.moveStart("character",elem.value.length);
      textRange.moveEnd("character",0);
      textRange.select();
    }
   num = str.length;
 }
  </script>
  <input type="text" name="" oninput="inputAccount()" id="bankCard" />
</body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script src="js/jQuery.js"></script>
</head>
<body>
  <input type="text" name="" id="box" />
  <script>
   $(function(){
    $('#box').keyup(function(){
     var value=$(this).val().replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 "); 
     $(this).val(value)
    }) 
   }) 
  </script>
</body>
</html>

总结

以上所述是小编给大家介绍的vue中Element-ui 输入银行账号每四位加一个空格的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
浅谈js闭包理解
Mar 28 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 #Javascript
Javascript 之封装(Package)
Sep 14 #Javascript
微信小程序框架wepy之动态控制类名
Sep 14 #Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 #Javascript
react 国际化的实现代码示例
Sep 14 #Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 #Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 #Javascript
You might like
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Flask框架的学习指南之用户登录管理
2016/11/20 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
新西兰优惠网站:Treat Me
2019/07/04 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
安全演讲稿开场白
2014/08/25 职场文书
法制演讲稿
2014/09/10 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python