Flutter表单：如何避免出发站与目的站字段值重复

你可以通过两种方式实现这个校验逻辑，一种是集成到表单字段的validator中实现实时校验提示，另一种是在提交时做全局校验并弹窗提示，以下是具体实现：

方案一：在DropdownSearch的validator中添加跨字段校验 #

修改两个DropdownSearch的validator函数，增加与另一个字段的对比逻辑，这样在用户选择站点或提交表单时，都会触发校验并显示错误提示：

// 出发站DropdownSearch修改后的validator
validator: (value) {
  if (value == null) {
    return '请选择出发站';
  }
  // 对比目的站是否相同
  if (value == stTujuan) {
    return '出发站与目的站不能相同';
  }
  return null;
},

// 目的站DropdownSearch修改后的validator
validator: (value) {
  if (value == null) {
    return '请选择目的站';
  }
  // 对比出发站是否相同
  if (value == stKeberangkatan) {
    return '目的站与出发站不能相同';
  }
  return null;
},

同时，为了让选择其中一个站点时，另一个站点的校验能实时更新，需要在onChanged回调中触发表单重新校验：

// 出发站的onChanged修改
onChanged: (newvalue) {
  setState(() {
    stKeberangkatan = newvalue!;
  });
  // 触发表单重新校验
  _formKey.currentState?.validate();
},

// 目的站的onChanged修改
onChanged: (newvalue) {
  setState(() {
    stTujuan = newvalue!;
  });
  // 触发表单重新校验
  _formKey.currentState?.validate();
},

这样用户选择完站点后，如果两个站点相同，对应的字段会立刻显示错误提示，提交时也会拦截。

方案二：提交时全局校验并弹窗提示 #

如果不想在字段上显示错误，而是希望提交时通过弹窗提示，可以保留原有字段的必填校验，修改提交按钮的逻辑：

onPressed: () {
  if (_formKey.currentState != null && _formKey.currentState!.validate()) {
    // 新增：校验两个站点是否相同
    if (stKeberangkatan == stTujuan) {
      // 显示弹窗提示
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: const Text('提示'),
          content: const Text('出发站与目的站不能相同，请重新选择'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('确定'),
            ),
          ],
        ),
      );
      return; // 拦截页面跳转
    }
    // 校验通过，跳转页面
    Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => BestRoute(
                stKeberangkatan: stKeberangkatan,
                stTujuan: stTujuan,
              )),
    );
  }
},

这种方式会在表单必填项校验通过后，再检查站点是否重复，若重复则弹出提示框，不进行页面跳转。

你可以根据产品需求选择其中一种方案，方案一的实时提示更友好，方案二的弹窗提示更聚焦提交动作。

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