小程序 input 限制只能输入整数 3 种实用方案，直接复制可用

在小程序开发过程中，经常会遇到需要限制 input 输入内容的场景，其中 只能输入整数 是最常见的需求之一 - 比如数量输入、ID 输入、年龄输入等。很多开发者在实现时会遇到非法字符无法实时过滤、开头多 0、正负号异常等问题，今天就整理 3 种最稳定、无 BUG 的实现方案，覆盖正整数、正负整数两种核心场景，直接复制代码就能集成到项目中，提升开发效率。

以下方案均基于微信小程序原生开发，不依赖任何第三方组件，兼容所有小程序基础版本，兼顾实用性和用户体验，适合各类小程序项目使用。

方案 1：只允许输入正整数（最常用场景）

该方案适用于仅需输入非负整数的场景，比如商品数量、订单编号、年龄等，同时处理了开头多 0 的问题，避免出现 00123 这类无效格式。

wxml 代码

<input
  type="digit"
  value="{{ num }}"
  bindinput="onInputInt"
  placeholder="请输入整数"
/>

js 代码

Page({
  data: {
    num: ''
  },

  // 输入时自动过滤非数字，处理开头多 0 问题
  onInputInt(e) {
    let value = e.detail.value;

    // 正则过滤：只保留 0-9 的数字，剔除所有非数字字符
    value = value.replace(/[^0-9]/g, '');

    // 可选优化：防止输入开头多个 0，仅保留第一个非 0 数字（如 00123 转为 123）
    if (value.length > 1 && value.startsWith('0')) {
      value = value.replace(/^0+/, '');
    }

    this.setData({
      num: value
    });
  }
});

方案 2：允许输入正负整数（特殊场景适用）

如果需要支持负数输入，比如温度、盈亏金额、坐标值等场景，可使用该方案，同时限制符号只能在第一位，避免出现 12-3 +45+6 这类无效格式。

wxml 代码

<input
  type="text"
  value="{{ num }}"
  bindinput="onInputIntWithSign"
  placeholder="请输入整数（支持正负）"
/>

js 代码

Page({
  data: {
    num: ''
  },

  // 支持正负整数输入，过滤非法字符并规范符号位置
  onInputIntWithSign(e) {
    let value = e.detail.value;

    // 正则过滤：只保留数字、负号、正号，剔除其他所有字符
    value = value.replace(/[^0-9\-+]/g, '');

    // 关键优化：符号只能在第一位，后续字符不允许再出现正负号
    if (value.length > 1) {
      value = value.charAt(0) + value.slice(1).replace(/[-+]/g, '');
    }

    this.setData({
      num: value
    });
  }
});

方案 3：极简写法（最佳实践推荐）

如果不需要复杂的优化，仅需快速实现 只能输入整数 的核心需求，推荐使用该方案 - 一行代码搞定过滤，简洁高效，适合快速开发场景，用户体验也不受影响。

wxml 代码

<input
  model:value="{{ num }}"
  bindinput="onInputInt"
  placeholder="只能输入整数"
/>

js 代码

Page({
  data: {
    num: ''
  },
  // 一行代码过滤所有非数字字符，直接实现整数限制
  onInputInt(e) {
    this.setData({
      num: e.detail.value.replace(/\D/g, '')
    });
  }
});

核心知识点总结

以上 3 种方案的核心逻辑均基于正则表达式过滤非法字符，不同场景对应不同的正则规则，整理如下，方便大家快速选型和记忆：

1. 仅需正整数：使用 /[^0-9]/g 过滤，可搭配开头多 0 优化；
2. 需要正负整数：使用 /[^0-9\-+]/g 过滤，同时规范符号位置；
3. 极简实现：使用 /\D/g 直接过滤所有非数字字符，高效便捷。

所有方案均采用 bindinput 实时监听输入，实现 输入即过滤 ，避免用户输入非法字符后再提示修改，提升用户体验。实际开发中，可根据项目具体需求选择对应方案，无需额外修改，直接复制代码即可使用。