vue限制输入框只能输入数字,且能有三位小数

<el-input
              v-model="where.wirediameter"
              :placeholder="$t('info.placeholderwirediameter')"
              clearable
              @clear="where.wirediameter = undefined"
              oninput="value=value.replace(/[^\d.]/g, '')//只能输入数字
              .replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3')//只能输入三个小数
              .replace(/\.{2,}/g, '.')//出现多个点时只保留第一个
              .replace(/^00*(\d)([0-9]*)/g,'$1$2')// 前两位不能同时是0;"
            />

区别:

第一种:可以输入0;

第二种:不可以输入0

<el-input
              v-model="where.wirediameter"
              :placeholder="$t('info.placeholderwirediameter')"
              clearable
              @clear="where.wirediameter = undefined"
              @input="num(where.wirediameter)"
            />
num(amount) {
      amount = amount
        .replace(/[^\d.]/g, '')
        .replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3') // eslint-disable-line
        .replace(/\.{2,}/g, '.'); //只能输入数字,只能输入两个小数,出现多个点时只保留第一个
      // 第一位不让输小数点
      if (amount == '.') {
        amount = '';
      }
      // 如果第一位是0,有第二位且第二位不是小数点的情况下 就清空输入框
      if (amount.slice(0, 1) == '0') {
        if (amount.slice(1, 2)) {
          if (amount.slice(1, 2) != '.') {
            // 第二位不是小数点,清空输入框
            amount = '';
          }
        }
      }
      this.$set(this.where, 'wirediameter', amount);
    },

 

posted @ 2024-09-14 08:47  Ao_min  阅读(191)  评论(0编辑  收藏  举报