如何简化含过多if语句的JS代码？需添加classList.remove功能

你的代码存在重复逻辑（两个输入框的验证和处理逻辑几乎一致），我们可以通过封装通用函数消除重复，同时补上classList.remove的逻辑，让验证通过时自动移除错误类。

简化后的完整代码 #

// 集中管理需要验证的输入元素
const inputs = {
  name: document.getElementById("name"),
  email: document.getElementById("email")
};

// 通用非空验证函数
const isInputNotEmpty = (input) => input.value.trim().length > 0;

// 通用输入处理函数：根据验证结果自动添加/移除error类
const handleInputValidation = (input) => {
  const isValid = isInputNotEmpty(input);
  // toggle方法会根据第二个布尔参数自动决定添加或移除类
  input.classList.toggle("error", !isValid);
};

// 给每个输入框绑定处理逻辑
inputs.name.addEventListener("input", () => handleInputValidation(inputs.name));
inputs.email.addEventListener("input", () => handleInputValidation(inputs.email));

关键优化说明 #

• 消除重复代码：把原本重复的validateInputXxx和handleInputXxx合并成通用函数，后续新增输入框时直接复用即可，不用再写重复逻辑。
• 自动处理类操作：用classList.toggle("error", !isValid)替代单独的add和remove——验证失败时（!isValid为true）添加error类，验证成功时自动移除，比if-else写法更简洁。
• 统一元素管理：用对象inputs集中存放输入元素，后续修改或新增元素时更便于维护。

扩展：如果需要不同的验证规则 #

比如邮箱需要格式校验，只需给对应输入框传入自定义验证逻辑即可：

// 自定义邮箱格式验证
const isEmailFormatValid = (input) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(input.value.trim());
};

// 邮箱专属处理逻辑
const handleEmailValidation = () => {
  const isValid = isEmailFormatValid(inputs.email);
  inputs.email.classList.toggle("error", !isValid);
};

inputs.email.addEventListener("input", handleEmailValidation);

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