Flutter中限制TextFormField输入1-12之间数字的实现方法

要实现仅允许输入1-12的数字，你可以通过自定义TextInputFormatter实时拦截不符合范围的输入，同时保留原有的数字输入限制和长度控制。以下是具体实现方案：

1. 自定义范围限制的输入格式化器 #

创建一个继承自TextInputFormatter的类，在核心方法中处理输入逻辑：

class RangeTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // 过滤非数字字符
    final filteredText = newValue.text.replaceAll(RegExp(r'[^0-9]'), '');
    
    // 限制输入长度最多2位
    if (filteredText.length > 2) {
      return oldValue;
    }
    
    // 判断数值是否在1-12范围内
    if (filteredText.isNotEmpty) {
      final number = int.parse(filteredText);
      if (number < 1 || number > 12) {
        // 超出范围则拒绝本次输入
        return oldValue;
      }
    }
    
    return TextEditingValue(
      text: filteredText,
      selection: TextSelection.collapsed(offset: filteredText.length),
    );
  }
}

2. 更新TextFormField配置 #

替换原有的FilteringTextInputFormatter为自定义的格式化器，同时保留maxLength属性：

TextFormField(
  inputFormatters: [
    RangeTextInputFormatter(),
  ],
  maxLength: 2,
  controller: controller,
  // 可选：添加表单提交时的二次验证
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入1-12之间的数字';
    }
    final number = int.parse(value);
    if (number < 1 || number > 12) {
      return '请输入1-12之间的数字';
    }
    return null;
  },
),

说明 #

• 自定义格式化器会实时过滤非数字内容，拦截超出长度和范围的输入，用户无法输入不符合要求的数值。
• 添加validator是为了在表单提交阶段做二次校验，避免特殊场景下的非法输入漏检。

内容的提问来源于stack exchange，提问作者ckot