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 相关文章推荐
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 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 magic quotes的详解
2013/06/17 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
查看python下OpenCV版本的方法
2018/08/03 Python
python3调用windows dos命令的例子
2019/08/14 Python
解决Django no such table: django_session的问题
2020/04/07 Python
win10安装python3.6的常见问题
2020/07/01 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
护士检查书
2014/01/17 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
三万活动总结
2014/04/28 职场文书
中国梦读书活动总结
2014/07/10 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书