Flutter：如何优雅验证合法的Radix 10数字？

你在iPhone上测试数字输入验证时碰到的这个问题我太熟悉了——原生数字软键盘居然允许输入多个逗号（比如25,52,85），触发"invalid Radix 10 number"错误，虽然你已经通过判断小数点首尾索引的方式解决，但确实不够简洁。这里给你几个更优雅的思路：

方案1：用double.tryParse()直接解析（最简洁） #

直接利用Flutter内置的数字解析方法，先把输入里的逗号替换成小数点，再尝试解析成double。如果解析失败，说明输入不合法，逻辑非常直观：

validator: (val) {
  if (val == null || val.isEmpty) return 'Amount is required';
  // 统一把逗号替换为小数点，适配不同输入习惯
  final cleanedInput = val.replaceAll(',', '.');
  // 尝试解析，失败则返回错误提示
  if (double.tryParse(cleanedInput) == null) {
    return 'Enter valid amount.';
  }
  return null;
},

这种方式不需要手动判断小数点数量，不管用户输入多少个点、逗号，或者其他非法字符（比如字母），只要无法解析成合法数字，就会触发验证提示，覆盖的场景比手动判断索引多得多。

方案2：用正则表达式精确匹配格式 #

如果需要更精准地控制数字格式（比如限制小数点后最多两位，或者只允许正整数），正则表达式是个不错的选择：

validator: (val) {
  if (val == null || val.isEmpty) return 'Amount is required';
  final cleanedInput = val.replaceAll(',', '.');
  // 正则规则：可选负号 + 至少1位整数 + 可选的小数点+至少1位小数
  // 可根据需求修改，比如要限制两位小数就改成 r'^-?\d+(\.\d{1,2})?$'
  final validNumberRegex = RegExp(r'^-?\d+(\.\d+)?$');
  if (!validNumberRegex.hasMatch(cleanedInput)) {
    return 'Enter valid amount.';
  }
  return null;
},

这个正则会自动排除多个小数点的情况，同时可以灵活调整规则，比如允许/禁止负数、限制小数位数等。

方案3：从输入阶段拦截非法内容（体验最优） #

与其在验证阶段处理非法输入，不如直接在用户输入时就限制他们输入多个小数点/逗号，用InputFormatter实现：

TextFormField(
  controller: sales,
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [
    // 只允许输入数字、小数点和逗号
    FilteringTextInputFormatter.allow(RegExp(r'[\d,.]')),
    // 自定义格式化器，确保最多只有一个小数点（自动把逗号转成点）
    TextInputFormatter.withFunction((oldValue, newValue) {
      final processedText = newValue.text.replaceAll(',', '.');
      final dotCount = processedText.split('.').length - 1;
      // 如果小数点数量超过1，就返回之前的合法输入
      if (dotCount > 1) {
        return oldValue;
      }
      return newValue.copyWith(text: processedText);
    }),
  ],
  decoration: const InputDecoration(
    filled: true,
    fillColor: CupertinoColors.white,
    border: OutlineInputBorder(),
    labelText: 'Sale amount',
    suffixText: 'ZAR',
    suffixStyle: TextStyle(color: Colors.green)
  ),
  maxLines: 1,
  validator: (val) {
    if (val == null || val.isEmpty) return 'Amount is required';
    // 此时输入已经被限制，只需要做最后一次解析验证即可
    if (double.tryParse(val) == null) {
      return 'Enter valid amount.';
    }
    return null;
  },
),

这种方式下用户根本没法输入25,52,85这类非法内容，从源头避免了验证错误，用户体验也更好。

总结 #

• 追求代码简洁：优先用方案1的double.tryParse()
• 需要精确格式控制：用方案2的正则表达式
• 追求最优用户体验：用方案3的输入拦截+验证

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