Flutter中如何验证TextFormField值与列表项匹配？

要实现“姓名和邮箱同时匹配MyItem列表中某一项才允许提交”的验证，你可以按以下步骤操作：

1. 确保MyItem列表已正确初始化 #

首先确认你通过http.get获取的数据已解析为List<MyItem>并完成初始化，示例代码如下：

class MyItem {
  final String name;
  final String email;

  MyItem({required this.name, required this.email});

  // 从HTTP返回的JSON解析数据
  factory MyItem.fromJson(Map<String, dynamic> json) {
    return MyItem(
      name: json['NAME'],
      email: json['EMAIL'],
    );
  }
}

// 示例HTTP请求函数
Future<List<MyItem>> fetchItems() async {
  final response = await http.get(Uri.parse('你的接口地址'));
  if (response.statusCode == 200) {
    List<dynamic> data = jsonDecode(response.body);
    return data.map((item) => MyItem.fromJson(item)).toList();
  } else {
    throw Exception('加载数据失败');
  }
}

2. 构建表单并添加基础验证 #

使用GlobalKey<FormState>管理表单状态，为姓名、邮箱输入框添加基础非空/格式验证：

final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
List<MyItem> _items = [];

@override
Widget build(BuildContext context) {
  return FutureBuilder<List<MyItem>>(
    future: fetchItems(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      } else if (snapshot.hasError) {
        return Center(child: Text('加载失败: ${snapshot.error}'));
      } else if (snapshot.data!.isEmpty) {
        return const Center(child: Text('无可用数据'));
      }

      _items = snapshot.data!;
      return Form(
        key: _formKey,
        child: Column(
          padding: const EdgeInsets.all(16),
          children: [
            TextFormField(
              controller: _nameController,
              decoration: const InputDecoration(labelText: '姓名'),
              validator: (value) {
                if (value?.trim().isEmpty ?? true) {
                  return '请输入姓名';
                }
                return null;
              },
            ),
            TextFormField(
              controller: _emailController,
              decoration: const InputDecoration(labelText: '邮箱'),
              validator: (value) {
                if (value?.trim().isEmpty ?? true) {
                  return '请输入邮箱';
                }
                // 可选：添加邮箱格式验证
                final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
                if (!emailRegex.hasMatch(value!.trim())) {
                  return '请输入有效的邮箱地址';
                }
                return null;
              },
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _submitForm,
              child: const Text('提交'),
            ),
          ],
        ),
      );
    },
  );
}

3. 编写联动验证逻辑并处理提交 #

在提交函数中，先通过表单的基础验证，再检查姓名和邮箱是否同时匹配列表中的某一项：

void _submitForm() {
  // 先通过单个字段的基础验证
  if (!_formKey.currentState!.validate()) {
    return;
  }

  final inputName = _nameController.text.trim();
  final inputEmail = _emailController.text.trim();

  // 检查是否存在匹配的MyItem
  bool isMatch = _items.any((item) => 
    item.name == inputName && item.email == inputEmail
  );

  if (isMatch) {
    // 验证通过，执行提交逻辑
    print('表单提交成功');
    // 例如：跳转页面、发送请求等
  } else {
    // 验证失败，提示用户
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('姓名和邮箱不匹配，请重新输入')),
    );
  }
}

关键说明 #

• 使用items.any()遍历列表，只要存在一项同时匹配姓名和邮箱就返回true，效率较高。
• 借助FutureBuilder确保表单在数据加载完成后才渲染，避免验证时列表为空。
• 基础验证和联动验证分开，既保证输入的合法性，又实现业务要求的匹配逻辑。

内容的提问来源于stack exchange，提问作者pedro.curti