JS金额验证，保留两位小数，超出两位输入无效（VUE + ElementUI）

JS金额验证，保留两位小数，超出两位输入无效（VUE + ElementUI）

• 需求
  • 输入框内输入金额
  • 金额不能为中文、特殊字符
  • 最大金额没有限制，最小金额大于0
  • 保留两位小数
  • 超出两位小数无法继续输入

<template>
  <div>
    <el-input v-model="price" placeholder="请输入价格" @input="check"></el-input>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      price: ''
    }
  },
  methods: {
     
    check () {
     
      // 正则限制输入的金额不能为中文、特殊字符、两位小数
      let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^[0-9]\.[0-9]([0-9])?$)/;
      // 输入金额不能为空
      if (this.price === ''){
     
        console.log('请输入价格')
      }
      // 如果不符合正则，提示
      if (!reg.test(+this.price)) {
     
        console.log('支付金额格式错误，请重新输入')
      }

      // 保留两位小数
      let price = this.price
      let pArr = price.split('.') //得到的是数组,pArr[0]为整数部分,pArr[1]为小数部分
      if(pArr.length > 1) {
     
          this.price = pArr[0] + "." + pArr[1].substr(0, 2);
      }
      // 最后得到的值为string类型，如果需要字符型可以使用Number(price)转换
    }
  }
}
</script>

坑坑:

保留两位小数的时候，最开始使用到的是toFixed(2)，但是这种实现方式导致了一些问题

• toFixed()是有四舍五入的，所以我继续输入5以上的数字，金额会一分一分的继续加，例如：当前我输入了1.43，我再输入9，金额会变为1.44
• 切记！！最后得到的是字符类型，如果需要数值型，一定要手动转一下！！