Flutter表单如何仅验证单个字段？

当前代码中点击「Send Code」按钮时，调用_formKey.currentState!.validate()会触发整个表单的所有字段验证，导致密码字段也被高亮。要实现仅验证邮箱字段的效果，你可以给邮箱输入框单独设置专属的表单字段Key，单独验证该字段即可：

1. 新增邮箱字段的专属Key #

在你的State类中添加一个用于绑定邮箱输入框的GlobalKey<FormFieldState>：

final _emailFieldKey = GlobalKey<FormFieldState>();

2. 给邮箱输入框绑定该Key #

修改邮箱对应的TextFormField，添加key属性绑定刚才创建的Key：

TextFormField(
  key: _emailFieldKey, // 绑定专属Key
  decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'Email Address'),
  controller: _EmailAddressController,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter email';
    }
    return null;
  },
),

3. 修改「Send Code」按钮的点击逻辑 #

不再调用整个表单的验证方法，而是单独验证邮箱字段：

TextButton(
  onPressed: () {
    // 仅验证邮箱字段
    final isValid = _emailFieldKey.currentState!.validate();
    if (isValid) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Processing Data')),
      );
    }
  },
  child: Text('Send Code',
      style: TextStyle(
          fontSize: 24,
          color: Colors.green[800],
          fontWeight: FontWeight.bold)),
),

修改完成后，点击「Send Code」按钮只会验证并高亮邮箱字段，密码字段不会被触发验证，完全满足你的需求。

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