input框限制只能输入两位小数

最新推荐文章于 2023-10-23 15:35:40 发布

原创最新推荐文章于 2023-10-23 15:35:40 发布 · 5.9k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #javascript #开发语言

该文章展示了如何在Vue.js应用中使用<InputNumber>组件来限制用户输入为最多两位小数。通过监听input事件并定义floatInput方法，对输入值进行正则表达式过滤，确保数值格式正确。同时，方法中处理了无小数点时首位不能为0的情况，以及确保始终只显示两位小数。

1.给数字输入框输入定义触发事件

 <InputNumber :max="10000" :min="0" v-if="weightFlag" v-model="form.weight" @input="floatInput" style="width: 185px"/>

2.定义触发后的方法回调

 //处理两位小数
    floatInput(val) {
      let checkPlan = "" + val;
      checkPlan = checkPlan
        .replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
        .replace(/^\./g, "") // 保证第一个为数字而不是.
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      if (checkPlan.indexOf(".") < 0 && checkPlan !== "") {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        checkPlan = parseFloat(checkPlan) + "";
      } else if (checkPlan.indexOf(".") >= 0) {
        checkPlan = checkPlan.replace(/^()*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
      }
      console.log(checkPlan);
      this.$nextTick(() => (this.form.weight = checkPlan * 1));
      return checkPlan;
    },