vue element-ui实现input输入框金额数字添加千分位


Posted in Javascript onDecember 29, 2019

在util.js中定义方法

包含金额添加过滤千分位,验证金额格式等

const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
// 金额添加千分位
const comdify = function (n) {
  if(!n) return n;
  let str = n.split('.');
  let re = /\d{1,3}(?=(\d{3})+$)/g;
  let n1 = str[0].replace(re, "$&,");
  return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
};
//去除千分位中的‘,'
const delcommafy = function (num){
  if(!num) return num;
  num = num.toString();
  num = num.replace(/,/gi, '');
  return num;
};
const valdateFn = function (rule,val,cb) {
  setTimeout(() => {
    if(val) {
      let inputVal = delcommafy(val);
      if (rule.test(inputVal)) {
        cb()
      } else {
        cb('只能是数字金额,最多两位小数')
      }
    }
    cb()
  })
}
// 验证金额数字可以为负数
const moneyValid = function (rule,val,cb) {
  valdateFn(/((^-?[1-9]\d*)|^-?0)(\.\d{0,2}){0,1}$/,val,cb);
};
// 验证金额数字不可以为负数
const moneyNValid = function (rule,val,cb) {
  valdateFn(MoneyTest,val,cb);
};
// 获取输入框的值
const getInputValue = function (el) {
  let inputVal = el.target.value || '';
  return comdify(delcommafy(inputVal));
};

在组件中使用

在template中

<el-input v-model.trim="form.pastAdjustFee" @blur="inputMoney($event,'pastAdjustFee')"></el-input>

在methods中定义

data(){
 return {
 form:{
  pastAdjustFee:''
 }
 }
}
methods:{
 inputMoney(el,name) {
     this.form[name] = getInputValue(el);
   }
}

总结

以上所述是小编给大家介绍的vue element-ui实现input输入框金额数字添加千分位,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 #Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 #Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 #Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 #Javascript
Vue页面刷新记住页面状态的实现
Dec 27 #Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 #Javascript
Vue中axios拦截器如何单独配置token
Dec 27 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
python学习教程之使用py2exe打包
2017/09/24 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python @property装饰器原理解析
2020/01/22 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
历史系毕业生自荐信
2013/10/28 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
超市活动计划书
2014/04/24 职场文书
学生安全承诺书
2014/05/22 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
运动会闭幕式主持词
2015/07/01 职场文书