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 相关文章推荐
$.get获取一个文件的内容示例代码
Sep 11 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP分页类集锦
2014/11/18 PHP
php while循环控制的简单实例
2016/05/30 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
django云端留言板实例详解
2019/07/22 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python和go语言的区别是什么
2020/07/20 Python
Python列表推导式实现代码实例
2020/09/09 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
2015年元旦活动总结
2014/05/09 职场文书
政府法律服务方案
2014/06/14 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
四年级语文教学反思
2016/03/03 职场文书
python本地文件服务器实例教程
2021/05/02 Python