el-input限制只能输入数字,且保留2位小数

6 篇文章 0 订阅
1 篇文章 0 订阅

        项目需求el-input组件输入的时候使用v-model.number="value"一开始可以输入任何字符。除非第一次输入为数字,后面输入的内容才会被限制,只能输入数字。这个并不符合需求。

我们要实现如下功能:

      1.必须为数字

      2.只能有一个小数点

      3.小数点后保留两位小数

      4.当第一位输入小数点的时候自动补全,补为 0.

      5.除非是小数,否则数字不能以0开头

一、绑定input事件对输入的内容进行自定义过滤

<el-input placeholder="售价" @input="limitInput($event, 'sellingPrice')" v-model.trim="form.sellingPrice">
</el-input>
/**
     * @param {string} value - 输入的值
     * @param {string} name - 匹配的对象属性
     */
    limitInput(value, name) {
      let dat =
        ("" + value) // 第一步:转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
          .replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数

      // 限制输入最大值为100
      if (Number(dat) >= 100) {
        return;
      }

      this.form[name] = dat;
   },

二、利用 Onkeyup 事件

<el-input
   Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))" 
   v-model.trim="form.test"
></el-input>

参考链接:https://www.jianshu.com/p/75df2814be0e

其他正则记录

1、金额的正则表达式校验(校验input输入框的内容为金额,不能为负数,保留两位小数)

var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;

2、输入框限制只能输入数字

Oninput="value=value.replace(/[^0-9]/g,'')"

  • 11
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值