如何在WPF表单中使用INotifyDataErrorInfo正确校验两个关联数据字段？

1. 关联两个字段的校验触发逻辑 #

不管修改F1还是F2，只要其中一个值发生变化，就同时触发两个字段的校验，而非仅校验被修改的字段。比如当F2从2改成3时，F1会被重新校验，此时系统能识别到F1=2和F2=3不相等，自动清除F1的错误状态。

2. 封装统一的校验函数 #

把两个字段的校验逻辑整合到一个独立函数中，同时检查两项规则：

• F1和F2均不为空字符串
• F1的值不等于F2的值
  根据校验结果，同步更新两个字段的错误状态（比如红色边框、错误提示文本）。

3. 优化校验触发时机 #

• 实时触发：在F1或F2的输入变更事件（如input、change）中调用校验函数，用户修改任意字段时，立刻更新两个字段的校验状态。
• 保存前兜底：点击保存按钮时仍调用一次校验函数，确保提交的数据最终符合规则。

示例伪代码 #

// 封装校验函数
function validateFields() {
  const f1Val = document.getElementById('F1').value.trim();
  const f2Val = document.getElementById('F2').value.trim();
  const f1Dom = document.getElementById('F1');
  const f2Dom = document.getElementById('F2');
  const errorMsgDom = document.getElementById('error-msg');
  
  let isValid = true;
  let errorText = '';

  // 校验空值
  if (!f1Val || !f2Val) {
    isValid = false;
    errorText = '两个字段都不能为空';
  } 
  // 校验值是否重复
  else if (f1Val === f2Val) {
    isValid = false;
    errorText = '两个字段的值不能相同';
  }

  // 更新字段样式与提示
  if (!isValid) {
    f1Dom.classList.add('error-border');
    f2Dom.classList.add('error-border');
    errorMsgDom.textContent = errorText;
  } else {
    f1Dom.classList.remove('error-border');
    f2Dom.classList.remove('error-border');
    errorMsgDom.textContent = '';
  }

  return isValid;
}

// 给两个字段绑定实时校验事件
document.getElementById('F1').addEventListener('input', validateFields);
document.getElementById('F2').addEventListener('input', validateFields);

// 保存按钮点击时执行最终校验
document.getElementById('save-btn').addEventListener('click', () => {
  if (validateFields()) {
    // 执行表单保存逻辑
    console.log('校验通过，开始保存');
  }
});

关键注意点 #

• 避免单独校验单个字段，必须保证关联字段的校验同步执行。
• 错误状态要统一管理，比如当两个字段从“值相同”变为“值不同”时，需同时清除两个字段的错误样式。

内容的提问来源于stack exchange，提问作者Thich Coi Phim