Vue element-ui form表单验证单价价格 input只允许输入保留两位小数的数字

需求：只允许用户输入保留两位小数的单价，且加上小数点不超过10个字符

1.html

 <el-form-item label="单价(元)" prop="price">
  <el-input :disabled="isEdit" v-model="ruleForm.price"  placeholder="请输入保留两位小数的单价" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
 </el-form-item>

2.data

 data() {
      const validatePrice = (rule,value,callback) =>{
        let reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$/
        if(!value){
            callback(new Error('单价不能为空'))
         }else if(!reg.test(value)){
            callback(new Error('请输入正确格式的单价'))
             this.$set(this.ruleForm, "price", '');
         }else if(value.length > 10){
            callback(new Error('最多可输入10个字符'))
             this.$set(this.ruleForm, "price", '');
         }else{
          callback();
        }
      };
}

解析正则表达式：以1-9开头或者只允许一个0且是0.×× ，也就说022.22是不被允许的。0.22可以通过验证

3. rules

rules: { 
    price: [{required: true,  trigger: 'blur', validator:validatePrice}]
},

4.效果

5.补充 ，如果是保留0-2位把正则表达式改成如下即可：

let reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})$/