前言：

最近在用uni-app框架，写一个项目（支付宝和微信小程序）遇到一个需求，要求金额输入框只能输入2位小数，且第一位数不能是 "."，只能是数字。发现用 @input事件监听input v-model绑定输入的值，在用正则去校验，可以解决这个问题，但是不完美的是，当达到小数点第二位之后，再次输入光标会不停的闪烁，体验感很差，又不想用第三方插件，也不想自定义组件，经过一番尝试，最终总结解决方案如下，既满足条件需求，用户体验感也完美，开心开心。

注意看注释!!!!!!!!

代码（vue版本）：

 <input type="digit" v-model="writeMoney" class="payInput" @input="oninput"  :maxlength="moneyMaxLeng" />

data() {
      return {
        writeMoney: "",
        moneyMaxLeng: 8//规定最大可输入的长度
     }
  },
    //输入内容验证
 oninput(e) {
        this.$nextTick(() => {
          let val = e.target.value.toString();
          val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
          val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
          val = val.replace(/^0+\./g, '0.');
          val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val
          val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''

          if (val.includes(".")) {
            let numDian = val.toString().split(".")[1].length;
            if (numDian === 2) {
              this.moneyMaxLeng = val.length;
            }
          } else {
            this.moneyMaxLeng = 8;
          }
          this.writeMoney = val;
        });
      },

代码（小程序原生版本）：

<input class="weui-input" value="{{writeMoney}}" bindinput="oninput" maxlength="{{moneyMaxLeng}}" placeholder="请输入" />

Page({
  data: {
    writeMoney: "",
  },
  oninput: function (e) {
    let val = e.detail.value.toString();
    wx.nextTick(() => {
      val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
      val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      val = val.replace(/^0+\./g, '0.');
      val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val
      val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
      console.log('您输入的值：',val);
      this.setData({
        writeMoney:val
      })
    });
  }
})

欢迎加入技术交流 ：811956471