el-input只能输入数字且有小数点最多保留两位

需求：只能输入数字或小数，小数最多两位，数据为空的input框颜色标红

一开始用el-form中的验证规则和onkeyup结合，但会有bug，输入除了数字以外的的确不能输入，框会标红显示不能提交，但是再输入数字还是会标红不能提交。

解决：不使用onkeyup，使用input的change事件

<template>
  <div class="hello">
    <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px"         
    class="demo-ruleForm">
      <el-form-item
        label="金额"
        prop="price"
        :rules="[
          { required: true, message: '金额不能为空'}
        ]"
      >
        <el-input v-model="numberValidateForm.price" :change="checkPrice()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numberValidateForm')">
        提交
        </el- button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        numberValidateForm: {
          price: ''
        }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    checkPrice () {
      let checkPlan = '' + this.numberValidateForm.price
      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') // 只能输入两个小数
      }
      this.numberValidateForm.price = checkPlan
    }
  }
}
</script>

后来还发现一个问题，如果小数点后面没数字也可以提交

解决：给rules加一个验证就好了

{ required: true, validator: valiNumberPass1, message: '金额不能为空'}

const valiNumberPass1 = (rule, value, callback) => { // 包含小数的数字

      let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g

      if (value === '') {

        callback(new Error())

      } else if (!reg.test(value)) {

        callback(new Error())

      } else {

        callback()

      }

    }