Flutter计算器应用使用FormKey实现文本框校验不生效问题求助

1. 校验触发逻辑缺失 #

Form表单的校验不会自动执行，你需要在提交操作（比如点击计算按钮）的回调中，手动调用formkey.currentState?.validate()触发全局校验，该方法会返回布尔值，true代表所有字段校验通过，false代表存在校验不通过的字段，错误提示会自动展示在对应TextFormField下方。

2. 正则表达式逻辑错误 #

你当前使用的正则^[,]*[.][0-9]+$存在两个严重问题：

• 要求输入内容必须包含小数点，整数（如123、45）会被判定为非法
• 开头允许多个逗号存在，不符合数字的输入规范

适配整数+小数的正则可替换为：RegExp(r'^\d+\.?\d*$')，如果需要支持负数可以改为RegExp(r'^-?\d+\.?\d*$')

3. 可选：开启实时自动校验 #

如果不需要点击按钮才校验，希望输入过程中实时校验，可以给Form组件添加autovalidateMode属性：

Form(
  key: formkey,
  autovalidateMode: AutovalidateMode.onUserInteraction, // 用户输入时自动校验
  child: ...
)

修正后的核心代码示例 #

// 定义全局formKey
final formKey = GlobalKey<FormState>();
final num1controller = TextEditingController();

// 计算按钮的点击回调示例
void handleCalculate() {
  // 手动触发校验
  if (formKey.currentState?.validate() ?? false) {
    // 校验通过，执行计算逻辑
    double num1 = double.parse(num1controller.text);
    // 后续逻辑...
  }
}

@override
Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(25.0),
    child: Form(
      key: formKey,
      // 可选开启实时校验
      autovalidateMode: AutovalidateMode.onUserInteraction,
      child: Column(
        children: <Widget>[
          const SizedBox(height: 45),
          const Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "Basic Calculator",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              )
            ],
          ),
          const SizedBox(height: 60),
          const Row(
            children: <Widget>[
              Text(
                "First Number",
                style: TextStyle(fontWeight: FontWeight.bold),
              )
            ],
          ),
          const SizedBox(height: 10),
          Row(
            children: <Widget>[
              Flexible(
                child: TextFormField(
                  keyboardType: TextInputType.number,
                  controller: num1controller,
                  decoration: InputDecoration(
                    hintText: "Enter a number",
                    border: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.teal)),
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return "请输入数字";
                    }
                    if (!RegExp(r'^\d+\.?\d*$').hasMatch(value)) {
                      return "请仅输入合法数字";
                    }
                    return null;
                  },
                ),
              ),
            ],
          ),
          // 新增计算按钮触发校验
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: handleCalculate,
            child: const Text("计算"),
          )
        ],
      ),
    ),
  );
}

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