vue 控制多个固定不同类型的数字输入框的输入值相加百分比不超过一百（用于计算费率）

原创于 2021-11-10 16:07:51 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

js utils 同时被 3 个专栏收录

17 篇文章

订阅专栏

vue.js

10 篇文章

订阅专栏

element ui input

1 篇文章

订阅专栏

这段代码展示了如何使用Vue.js实现输入框数值验证，确保输入的数字小数位不超过两位，并且计算多个输入框费率的合计，如果超过100%则给出警告并清空输入。同时，它还更新了一个总和的输入框显示计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v为输入框的值，type为输入框的类型
addressChange: function (v, type) {
        var _this = this;
        //控制输入框只能输入数字，而且小数位不超过二
        v = v.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
        Vue.nextTick(function () {
          _this.$set(_this.basicInforList, 'feeDealType_' + type, v);
          var numbers = [201, 202, 363, 360, 385, 367, 307, 381, 384, 365, 380, 382, 366, 361, 374, 362,313];（输入框数量）
          var sum = 0;
          for (i = 0; i < numbers.length; i++) {
            sum = sum + Number(_this.basicInforList['feeDealType_' + numbers[i]])
          }
          sum = sum.toFixed(2)  （只留两位小数）
          if (Number(sum) > 100) {
            _this.$message({
              type: 'warning',
              message: '费率合计不能大于100%'
            })
            _this.$set(_this.basicInforList, 'feeDealType_' + type, '');
            sum =  (sum - v).toFixed(2);
          }
          _this.basicInforList['feeDealType_302'] = sum; (总和的输入框，不需要纳入计算，只需要展示）
        })

      },

html部分

<el-input  v-model="basicInforList.feeDealType_201"
  @input='addressChange($event,201)'  placeholder="请输入">
 <i slot="suffix">%</i></el-input>
 省略多个输入框。。。。。。