Flutter表单未校验所有字段及自定义校验消息咨询

核心问题原因 #

• TextField 不属于 FormField 子类，Form的validate()方法只会校验继承自FormField的组件（比如TextFormField、IntlPhoneField），所以你的TextField不会被触发校验。

修改步骤与代码示例 #

1. 替换TextField并添加自定义校验 #

把普通TextField换成TextFormField（Form封装版的输入框，支持校验逻辑），同时给IntlPhoneField也加上自定义校验规则，设置空值提示。

2. 完善继续按钮逻辑 #

只有在校验全部通过后，再推进步进器，避免无效的步骤切换。

修改后的完整代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Form(
      key: _formKey,
      child: Stepper(
        currentStep: _currentStepper,
        onStepContinue: _continueStep,
        steps: [
          Step(
            title: const Text('Enter your name and phone number'),
            content: Column(
              children: [
                // 替换为TextFormField并设置自定义空值提示
                TextFormField(
                  controller: _displayNameTextFieldController,
                  decoration: const InputDecoration(labelText: 'Name'),
                  validator: (value) {
                    if (value == null || value.trim().isEmpty) {
                      return '请输入您的姓名';
                    }
                    return null;
                  },
                ),
                IntlPhoneField(
                  decoration: const InputDecoration(
                    labelText: 'Phone Number',
                  ),
                  onChanged: (phone) {
                    setState(() {
                      _phoneNumber = (phone.completeNumber).trim();
                    });
                  },
                  // 给手机号设置自定义空值提示
                  validator: (phone) {
                    if (phone == null || phone.number.trim().isEmpty) {
                      return '请输入您的手机号';
                    }
                    return null;
                  },
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}

void _continueStep() {
  if (_currentStepper == 0) {
    // 校验通过后再推进步进器
    if (_formKey.currentState?.validate() ?? false) {
      setState(() {
        _currentStepper += 1;
      });
    }
  }
}

关键说明 #

• 所有需要Form统一校验的输入组件，必须是FormField的子类，TextFormField是TextField的Form适配版本，自带校验支持。
• validator回调中，返回非null字符串时，该字符串会作为错误提示显示在输入框下方；返回null则表示当前输入校验通过。
• 调用validate()后，必须判断返回值是否为true，再执行步进器前进逻辑，确保只有合法输入才会切换步骤。

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