实现input输入框只能输入数字以及小数点后两位（金额校验）

金额校验我们经常遇到，来看看怎么实现

<el-input v-model="confirmMontForm.payFineAmt" @keyup.native="confirmMontForm.payFineAmt = checkInput(confirmMontForm.payFineAmt)"></el-input>

上面是用的element的input组件，你也可以直接用input，这个无所谓，就是个标签。

看里面用v-model双向绑定了confirmMontForm这个对象下的payFineAmt，因为我里面有好几个input，我就随便抽一个出来了。其实这个实现，我们用keyup事件，顺便回忆一下以下常用便捷方式吧：

事件代码	事件描述
@keyup.enter	回车按键松开
@keyup.left	左键按键松开
@keyup.right	右键按键松开
@keyup.up	上键按键松开
@keyup.down	下键按键松开
@keyup.delete	删除键松开

ok，思考一下为什么后面还要加.native?

这是因为element-ui组件在原生组件的基础上进行了封装。如想使用@keyup则需要加上native关键词。即@keyup.native.enter(回车按键松开)

继续，我们直接看后面的checkInput方法吧：

checkInput(num) {
      var str = num;
      var len1 = str.substr(0, 1);
      var len2 = str.substr(1, 1);
      //如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1);
      }
      //第一位不能是.
      if (len1 == ".") {
        str = "";
      }
      //限制只能输入一个小数点
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1);
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
        }
        if (str_.length > 2) {
          this.$message.warning(`金额小数点后只能输入两位，请正确输入！`);
          return (str = "");
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
      return str;
    }

OK，上面就是实现方法，在输入的时候实现自动校验，去试试吧！