校验input框仅输入非负数 且保留两位小数

使用正则表达式进行校验，在input值发生变化时调用 valInput()函数进行校验，在输入框失去焦点或用户按下回车时调用 toNum()函数对数据进行处理（去除多余的小数点）：

<el-input
  v-model="value"
  @input="valInput($event)"
  @change="toNum($event)"
/>

绑定数据：

data() {
  return {
    "value":"",
    "max":"100", // 用作最大值校验
  }
}

校验方法：

methods: {
  // 校验方法
  valInput(val) {
    let value = val;
    // 校验是否为数字且小数点后仅有两位
    if (!/^\d+(\.\d{0,2})?$/.test(value)) {
      // 不符合校验的字符替换为空字符
      value = value.replace(/[^\d.]/g, '');
      // 判断输入值以防保留小数时报错NaN
      if (value != '' && value != '.') {
        // 保留两位小数（非四舍五入）
        value = (Math.floor(parseFloat(value) * 100) / 100).toFixed(2);
      }
    }
    // 非负校验
    if (value < 0) {
      value = 0;
    }
    // 输入最大值校验
    if (value > Number(max)) {
      value = max;
    }
    // 删除非0数字前面的0
    if (value >= 1 && String(value)[0] == 0 && value.length > 1) {
      value = value.replace(/^[0]+/, '');
    }
    this.value = value;
  },
  // 数据处理，以便去除多余的小数点
  toNum(val) {
     this.value = String(Number(val));
  },
}

说明：

^表示必须以什么字符开头；$表示必须以什么字符结尾

\d是正则表达式中的元字符，用于匹配数字，相当于[0-9]，所以[0-9]也可以写成\d

* 表示重复0次或更多次（任意次数）

?表示重复0次或1次（最多1次）

{n}表示重复n次

{n,m}表示重复n-m次

分组使用的字符为“(”和“)”，即左括号和右括号。每一个子表达式都可以当做一个整体来处理