uniapp 如何限制input只能输入两位小数

在uniapp开发中，如何限制input输入框只能输入两位小数？比如金额输入时，用户输入超过两位小数时要自动截断或禁止输入。希望提供一个具体的实现方法，最好能兼容H5和小程序平台。

2 回复

使用正则表达式限制输入。在input的@input事件中处理：

handleInput(e) {
  let value = e.detail.value;
  value = value.replace(/[^\d.]/g, '');
  value = value.replace(/\.{2,}/g, '.');
  value = value.replace(/^\./g, '');
  value = value.replace(/^0+(\d)/, '$1');
  
  const arr = value.split('.');
  if (arr.length > 1) {
    arr[1] = arr[1].substring(0, 2);
    value = arr.join('.');
  }
  
  this.value = value;
}

同时设置input的type="digit"或type=“number”。


在 UniApp 中，可以通过以下方法限制 input 组件只能输入两位小数。推荐使用正则表达式结合 @input 事件来实现，确保用户输入时自动过滤不符合规则的字符。

实现步骤：

  1. 在模板中使用 input 组件，并绑定 value 和 @input 事件。
  2. 在事件处理函数中，使用正则表达式匹配并限制输入内容。
  3. 如果输入不符合规则（如超过两位小数），自动修正为有效值。

示例代码：

<template>
  <view>
    <input 
      type="digit" 
      v-model="inputValue" 
      @input="handleInput" 
      placeholder="请输入数字（最多两位小数）"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(e) {
      let value = e.detail.value;
      // 正则表达式：允许数字、小数点，且小数点后最多两位
      const reg = /^\d*\.?\d{0,2}$/;
      if (!reg.test(value)) {
        // 如果输入无效，自动修正为上一次的有效值或清空
        this.inputValue = this.lastValidValue || '';
      } else {
        this.lastValidValue = value; // 保存当前有效值
      }
    }
  }
};
</script>

代码说明：

  • 正则表达式：/^\d*\.?\d{0,2}$/ 解释：
    • ^\d*：匹配0个或多个数字（整数部分）。
    • \.?：匹配0个或1个小数点。
    • \d{0,2}：匹配0到2位数字（小数部分）。
    • $：匹配字符串结尾。
  • 逻辑：通过 @input 事件实时检测输入内容，如果不符合正则规则，则自动恢复为上一次的有效值（lastValidValue），确保输入框内容始终合法。
  • 注意：type="digit" 可以限制键盘为数字类型（仅支持整数和小数），但需结合正则实现小数位数限制。

其他优化建议：

  • 如果需要更严格的限制（如禁止以小数点开头），可以调整正则表达式，例如：/^\d+(\.\d{0,2})?$/。
  • 对于已输入的内容，可以通过 blur 事件进行最终格式化（例如补全小数位）。

这种方法简单高效，适用于大部分输入限制场景。如果有特殊需求，可以进一步调整正则表达式。

回到顶部