Flutter中适配TextFormField的HH:MM时间格式正则表达式问题

你遇到的问题很典型——当前的正则表达式要求输入完整的HH:MM格式才能被允许，但FilteringTextInputFormatter.allow会校验每一次输入后的整个字符串是否匹配正则。比如你刚输入第一个数字1时，字符串是"1"，完全不符合^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$，所以被拦截了。

正确的正则表达式（支持逐步输入） #

我们需要写一个能匹配输入过程中所有合法中间状态的正则：

RegExp(r'^([0-1]?\d|2[0-3])?$|^([0-1]?\d|2[0-3]):$|^([0-1]?\d|2[0-3]):[0-5]?\d$')

这个正则的每一部分对应一种合法的输入状态：

• ^([0-1]?\d|2[0-3])?$：允许空字符串，或者只输入了合法的小时（比如0、12、23）
• ^([0-1]?\d|2[0-3]):$：允许输入小时后加上冒号（比如9:、20:）
• ^([0-1]?\d|2[0-3]):[0-5]?\d$：允许输入完整或部分分钟（比如10:3、14:59）

完整的TextFormField示例 #

TextFormField(
  keyboardType: TextInputType.datetime,
  inputFormatters: [
    FilteringTextInputFormatter.allow(
      RegExp(r'^([0-1]?\d|2[0-3])?$|^([0-1]?\d|2[0-3]):$|^([0-1]?\d|2[0-3]):[0-5]?\d$'),
    ),
  ],
  // 可选：添加validator确保最终输入是完整的HH:MM格式
  validator: (value) {
    if (value == null || !RegExp(r'^([0-1]?\d|2[0-3]):[0-5]\d$').hasMatch(value)) {
      return '请输入正确的时间格式（HH:MM）';
    }
    return null;
  },
  decoration: const InputDecoration(
    labelText: '时间',
    hintText: '例如：14:30',
  ),
)

额外说明 #

• FilteringTextInputFormatter.allow的作用是只保留匹配正则的内容，所以必须覆盖所有用户输入时的合法中间状态，否则输入会被拦截。
• 搭配validator可以在提交表单时做最终校验，确保用户输入的是完整且合法的时间格式。

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