Angular表单自定义验证器返回Null未清除表单错误问题

嘿，这个场景我之前也遇到过！用户设置页里密码字段留空的情况确实容易踩坑，咱们调整下验证逻辑的优先级就能解决问题。

核心逻辑很简单：先判断两个密码字段是否都为空，如果是，直接返回验证通过；只有当至少一个字段有内容时，再执行密码匹配的校验。这样既满足了“用户不想改密码时表单可正常提交”的需求，又不会破坏正常改密码时的匹配验证。

下面是一个自定义验证函数的调整示例，你可以根据自己使用的表单框架（Vue/React/Angular等）适配细节：

// 自定义密码匹配验证器
function checkPasswordMatch(originalPwd, confirmPwd) {
  // 第一步：判断两个字段是否全为空
  const isBothEmpty = !originalPwd.trim() && !confirmPwd.trim();
  if (isBothEmpty) {
    return { valid: true, errorMsg: '' };
  }

  // 第二步：非空时执行匹配校验
  if (originalPwd !== confirmPwd) {
    return { valid: false, errorMsg: '确认密码与原密码不匹配' };
  }

  return { valid: true, errorMsg: '' };
}

如果是用表单验证库，规则调整逻辑也是一致的：

import { defineRule } from 'vee-validate';

// 定义自定义匹配规则
defineRule('pwd_match', (value, [targetField]) => {
  const targetValue = document.getElementById(targetField).value;
  
  // 全空则通过验证
  if (!value.trim() && !targetValue.trim()) {
    return true;
  }
  
  // 否则检查匹配
  return value === targetValue || '确认密码与原密码不匹配';
});

• 确保表单的其他字段（比如昵称、邮箱等）的验证逻辑独立，不受密码字段的影响
• 如果你的表单有“必填”规则，记得不要给密码字段加必填校验，这样用户才能自由选择是否修改密码

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