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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
jQuery each()小议
Mar 18 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
解决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
Zerg剧情介绍
2020/03/14 星际争霸
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
Angularjs 基础入门
2014/12/26 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python executemany的使用及注意事项
2017/03/13 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
python中time tzset()函数实例用法
2021/02/18 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
升国旗仪式主持词
2014/03/19 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
外出学习心得体会范文
2016/01/18 职场文书
2016年五一促销广告语
2016/01/28 职场文书
python如何进行基准测试
2021/04/26 Python