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里访问SharePoint列表数据的实现方法
May 22 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
解决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
追求程序速度,而不是编程的速度
2008/04/23 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
JS input 数字验证代码
2009/07/30 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
js实现打字小游戏
2019/12/17 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
总经理秘书的岗位职责
2013/12/27 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL