2024-08-07

el-input 各种输入限制的正则整理

金额输入最常用的正则限制

限制input输入框只能输入数字和小数点、保留两位小数、千分位逗号分割的正则表达式。

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
    input.value = onlyNumOnePoint(val);
}

const onlyNumOnePoint = (number_only) => {
  // 将中文句号（。）替换为英文小数点（.）
  number_only = number_only.replace(/。/g, '.');
  // 先把非数字的都替换掉，除了数字和小数点
  number_only = number_only.replace(/[^\d.]/g, "");
  // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
  number_only = number_only.replace(/^0+(\d)/, '$1');
  // 必须保证第一个为数字而不是小数点
  number_only = number_only.replace(/^\./g, "");
  // 保证只有出现一个小数点而没有多个小数点
  number_only = number_only.replace(/\.{2,}/g, ".");
  // 保证小数点只出现一次，而不能出现两次以上
  number_only = number_only.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");
  // 保证只能输入一个小数
  // number_only = number_only.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
  // 保证只能输入两个小数
  number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
  // 千分位逗号分割  
  number_only = number_only.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  return number_only;
}

2024-08-07

javascript

el-input-number修改数值失效的问题

一次在项目中，发现el-input-number无法输入，查阅了相关文档，发现可能是组件层级过深导致视图无法刷新。解决办法是在el-input-number上绑定@change="changeVal($event)"

<el-table-column slot="operationPrice" label="数量"  width="150">
    <template slot-scope="scope">
        <el-input-number v-model="scope.row.num"  :precision="0" :min="1" label="描述文字" @change="changeVal($event)">
        </el-input-number>
    </template>
</el-table-column>

changeVal() {
      this.$forceUpdate();
}