vue项目原生input框限制只能输入金额（必须大于0，最多小数点后两位，不能输入e、+、-）

今天碰到一个需求，做的是微信支付，所以需要设置输入框里必须输入是能支付的数字，想投机网上直接找现成的方法，发现大部分都有bug或者不生效。于是自己费了点时间写了以下提供两种方案，希望有帮助。

input里面type必须设置为text才有效！！！

<template>
  <div class="home">
    <!-- 必须type设置为text才有效！！！number无效 -->
    <input type="text" v-model="amount" @input="limitNum(amount)" />
  </div>
</template>

data() {
    return {
      amount: "",
    };
  },

一、如果输入01，则展示成1

//第一种方案：用户输入01、02等，则展示成1、2，等于非小数时过滤第一位0
limitNum(amount) {
      amount = amount
        .replace(/[^\d.]/g, "") //只能输入数字
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3") //只能输入两个小数
        .replace(/\.{2,}/g, "."); //出现多个点时只保留第一个
      // 第一位不让输小数点
      if (amount == ".") {
        amount = "";
      }
      // 如果第一位是0，第二位必须大于0或者小数点
      if (amount.substring(0, 1) == 0) {
        if (amount.substring(1, 2) > 0) {
          amount = amount.substring(1, 2);
        } else if (
          amount.substring(1, 2) === 0 ||
          amount.substring(1, 2) === "0"
        ) {
          amount = "0";
        }
      } else {
        // 如果第一位数字大于0（不等于0肯定就大于0），仅需考虑第二位是小数点的情况
        if (amount.indexOf(".") !== -1) {
          if (amount.substring(0, 1) > 0) {
            console.log("第一位大于0");
          } else {
            console.log("第一位等于0");
            if (amount.substring(2, 3) > 0) {
              console.log("小数点后第一位大于0");
            } else {
              console.log("小数点后第一位等于0");
              amount = "0.";
            }
          }
        } else {
          console.log("没有小数点，正常输入");
        }
      }
      this.amount = amount;
    },

二、如果输入00、01，则直接清空输入框

//第二种方案：输入00、01等0开头的整数时，直接清空输入框让用户重新输入
    num(amount) {
      amount = amount
        .replace(/[^\d.]/g, "") //只能输入数字
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3") //只能输入两个小数
        .replace(/\.{2,}/g, "."); //出现多个点时只保留第一个
      // 第一位不让输小数点
      if (amount == ".") {
        amount = "";
      }
      // 如果第一位是0，有第二位且第二位不是小数点的情况下 就清空输入框
      if (amount.slice(0, 1) == "0") {
        if (amount.slice(1, 2)) {
          if (amount.slice(1, 2) == ".") {
            console.log("第二位是小数点");
          } else {
            console.log("第二位不是小数点，清空输入框");
            amount = "";
          }
        }
      }
      this.amount = amount;
    },

个人觉得，第一种方案用户体验更好一些，开发者的目的无非就是让用户输入的内容转变为金额形式的数字，但代码逻辑稍复杂一些。第二种就更简洁易懂一些，直接一棍子打死，用户想乱输直接清空输入框重来。怎么选用取决于开发的具体需求吧！

最后提供一种最简单最便捷的html处理数据方式（此类方式不能处理‘01’之类的数字）

<el-input
  onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3').replace(/[^\d.]/g,'')"
  v-model="scope.row.amount"
  placeholder="请输入本次走访接单金额"
></el-input>