如何简化JavaScript中多验证函数的if条件判断？

问题场景 #

你当前的if条件判断逻辑冗余，多个!和||堆砌导致代码可读性差：

if ((!emailValidation() || (!nameValidation()) || (!surnameValidation()) || (!addressValidation()) || (!cityValidation()) || (!postalCodeValidation()))) {        
}

核心优化思路 #

原逻辑本质是：只要任意一个验证函数返回false，就执行if块内的代码。基于这个逻辑，可以用数组结合数组方法来简化判断。

方案一：用数组+some()/every()简化条件判断 #

1. 先把所有验证函数存入一个数组：

const validationFunctions = [
  emailValidation,
  nameValidation,
  surnameValidation,
  addressValidation,
  cityValidation,
  postalCodeValidation
];

2. 用some()方法替换原if条件：

// 只要有一个验证函数返回false，就进入if块
if (validationFunctions.some(fn => !fn())) {
  // 你的业务逻辑代码
}

或者用every()的取反写法，逻辑完全一致：

// every()返回true表示所有验证都通过，取反则是存在验证失败
if (!validationFunctions.every(fn => fn())) {
  // 你的业务逻辑代码
}

优势：后续新增/删除验证规则，只需修改数组内容，无需改动判断条件，代码扩展性更强。

方案二：优化验证函数本身（可选） #

看你提供的surnameValidation示例，存在重复代码和小问题（比如focus漏了调用括号），可以同步优化验证函数，让整体逻辑更清晰：

let surnameValidation = () => {
  const input = apellidoUsuario;
  const value = input.value;

  // 合并重复的错误判断逻辑
  if (value.length <= 1) {
    surnameError();
    return false;
  }

  // 把样式设置抽成复用函数，避免重复代码
  const applyValidStyle = (element) => {
    element.focus(); // 原代码漏了()，需补上才会触发焦点
    element.style.border = '0';
    element.style.backgroundColor = 'transparent';
    element.style.outline = '1px solid #00ffb1';
    element.style.transitionDuration = '0.4s';
  };

  applyValidStyle(input);
  return true;
};

优势：减少重复代码，验证函数逻辑更简洁，后续修改样式或验证规则更高效。

内容的提问来源于stack exchange，提问作者Emiliano Velázquez