侯体宗的博客
  • 首页
  • Hyperf2.1版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 2年前   128

在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中

在methods中定义

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

总结

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

您可能感兴趣的文章:

  • Vue数字输入框组件示例代码详解
  • vue.js实现只能输入数字的输入框
  • Vue数字输入框组件的使用方法
  • Vue.js数字输入框组件使用方法详解
  • 基于Vue开发数字输入框组件
  • Vue实现数字输入框中分割手机号码的示例
  • vue input输入框模糊查询的示例代码
  • vue中使用iview自定义验证关键词输入框问题及解决方法
  • vue实现验证码输入框组件
  • Vue数字输入框组件使用方法详解


  • 上一条:
    vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
    下一条:
    Vue组件通信入门之Provide和Inject机制
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • TP(3/5)
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • uni-app在详情页中给电话信息添加点击拨打电话的功能按钮(0个评论)
    • uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo(0个评论)
    • uni-app开发小程序使用uni.getLocation()实现页面即时获取当前定位信息demo(1个评论)
    • uni-app开发小程序实现列表页条件筛选显示功能demo(0个评论)
    • vue+elementui实现百度地图api滑上列表显示位置信息(0个评论)
    • 近期文章
    • Laravel 9.13版本发布(0个评论)
    • beego+GeoLite2免费数据库获取ip地址经纬度等定位归属信息(0个评论)
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
    • Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
    • go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
    • 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
    • Laravel角色和权限:拦截器Gates和策略Policies的解释(0个评论)
    • Laravel 9.12版本发布(0个评论)
    • go语言中实现把数据写入文件函数WriteFile()编写(0个评论)
    • 近期评论
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 路过的靓仔 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..
    • 激光豆芽 在

      为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
    • 激光豆芽 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客