如何运用DRY原则简化存在重复代码的表单验证函数？

你的代码里重复了相同的验证逻辑——检查字段长度、设置错误样式、显示错误提示、聚焦字段，完全可以通过提取通用逻辑来简化，符合DRY（Don't Repeat Yourself）原则。

方案一：提取通用验证函数 #

把重复的验证逻辑封装成一个可复用的函数，后续验证不同字段时直接调用即可：

// 通用字段验证函数
function validateField(field, errorElement, minLength) {
  // 验证不通过的逻辑
  if (field.value.length < minLength) {
    field.style.border = '1px solid red';
    errorElement.style.display = 'block';
    field.focus();
    return false;
  }
  // 可选：验证通过时重置样式（原代码未处理，补充后体验更友好）
  field.style.border = '';
  errorElement.style.display = 'none';
  return true;
}

// 主验证函数
function validated() {
  // 依次验证每个字段，任一不通过则返回false
  if (!validateField(user, userError, 9)) return false;
  if (!validateField(password, passError, 9)) return false;

  // 所有验证通过后执行后续逻辑
  return true;
}

方案二：批量处理字段（适合后续新增更多字段） #

如果之后要验证更多字段，可以把字段配置放到数组里，通过循环批量验证，进一步减少重复：

function validated() {
  // 定义需要验证的字段配置
  const fieldConfigs = [
    { field: user, errorElement: userError, minLength: 9 },
    { field: password, errorElement: passError, minLength: 9 }
  ];

  // 循环验证每个字段
  for (const config of fieldConfigs) {
    const { field, errorElement, minLength } = config;
    if (field.value.length < minLength) {
      field.style.border = '1px solid red';
      errorElement.style.display = 'block';
      field.focus();
      return false;
    }
    // 重置样式
    field.style.border = '';
    errorElement.style.display = 'none';
  }

  return true;
}

两种方案都能大幅减少重复代码，后续修改验证规则（比如调整最小长度）或新增字段时，只需修改通用函数或添加配置项即可，代码更易维护。

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