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

  • 需求
    • 输入框内输入金额
    • 金额不能为中文、特殊字符
    • 最大金额没有限制，最小金额大于0
    • 保留两位小数
    • 超出两位小数无法继续输入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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
切记！！最后得到的是字符类型，如果需要数值型，一定要手动转一下！！