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 相关文章推荐
js定时器的使用(实例讲解)
Jan 06 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
基于Vue实现拖拽功能
2020/07/29 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
领导干部培训感言
2014/01/23 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers