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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
javascript 回调函数详解
Nov 11 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 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使用ob_start生成html页面的方法
2014/11/07 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
python生成IP段的方法
2015/07/07 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
关于Java finally的面试题
2016/04/27 面试题
应届生骨科医生求职信
2013/10/31 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
毕业生实习证明
2014/09/19 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python