JavaScript修改input字段颜色及姓名输入框仅字母校验问题求助

现有代码的错误点 #

• 错误1：校验逻辑完全不符合要求。input.value 拿到的永远是字符串类型，typeof firstName.value != "string" 的判断永远不成立，完全达不到「仅允许输入字母」的校验效果。
• 错误2：DOM操作对象错误。firstName.value 是字符串值，不存在 style 属性，修改背景色应该操作 firstName 这个输入框元素本身，而不是它的value值。
• 潜在问题：你给所有input绑定了focusout事件，又单独给#fname绑定了同一个事件，两个事件会先后触发，可能出现全局校验覆盖fname特殊校验结果的冲突。

修复方案 #

方案1：单独调整fname的校验逻辑，阻止事件冲突 #

let firstName = document.querySelector("#fname");
firstName.addEventListener("focusout", (e) => {
  // 阻止全局的input focusout事件触发，避免覆盖当前校验结果
  e.stopImmediatePropagation();
  // 和原有逻辑一致，移除所有空格后再校验
  const value = firstName.value.replace(/\s/g, '');
  // 非空校验
  if (value === "") {
    firstName.style.backgroundColor = "red";
    return;
  }
  // 正则校验仅允许大小写字母，需要支持其他字符可自行调整正则规则
  const onlyLetterReg = /^[A-Za-z]+$/;
  firstName.style.backgroundColor = onlyLetterReg.test(value) ? "green" : "red";
});

方案2：把fname的特殊校验整合到原有全局逻辑中，更易维护 #

直接修改原有的全局input校验代码即可，不需要额外绑定事件：

document.querySelectorAll("input").forEach((inp) => {
  inp.addEventListener("focusout", () => {
    let value = inp.value.split(" ").join("");
    // 通用非空校验
    if (value == "") {
      inp.style.backgroundColor = 'red';
      return;
    }
    // 针对fname的额外字母校验
    if (inp.id === 'fname') {
      const onlyLetterReg = /^[A-Za-z]+$/;
      inp.style.backgroundColor = onlyLetterReg.test(value) ? 'green' : 'red';
      return;
    }
    // 其他输入框的通用逻辑
    inp.style.backgroundColor = 'green';
  });
});

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