JS表单提交时forEach失效，如何根据年龄输出对应提示到div？

存在的问题 #

• 你已经提前声明了对应DOM的变量，后续代码却直接使用ID引用DOM，逻辑不统一
• 密码校验的判断位置错误，现在只有年龄填写完成才会校验密码，不符合全量校验的需求
• 空数组执行forEach不会有任何执行结果，校验通过时feedback数组为空，你写的年龄判断逻辑完全不会触发
• 输入框取到的年龄是字符串类型，未转成数字就做大小比较，会有隐式类型转换的风险
• 没有做成功场景的提示输出逻辑，现在只处理了错误提示的输出

修改后的JS代码 #

let nameElement = document.getElementById("UNameInput");
let faultElement = document.getElementById("errorOutput");
let ageElement = document.getElementById("AgeInput");
let clickElement = document.getElementById("button");
let passwordElement = document.getElementById("PasswordInput");
let outputElement = document.getElementById("output"); // 新增成功提示输出元素

clickElement.addEventListener("click", function(e) {
  e.preventDefault(); // 统一阻止默认提交行为，避免页面刷新
  let feedback = [];
  // 先统一做全量校验
  if (!nameElement.value.trim()) {
    feedback.push('姓名输入不能为空')
  }
  if (!ageElement.value.trim()) {
    feedback.push('年龄输入不能为空')
  }
  if (passwordElement.value !== 'IHM') {
    feedback.push('密码无效')
  }

  // 有错误就输出错误
  if (feedback.length > 0) {
    faultElement.innerText = feedback.join(", ");
    outputElement.innerText = ""; // 清空之前的成功提示
    return;
  }

  // 校验通过，处理年龄判断逻辑
  faultElement.innerText = ""; // 清空之前的错误提示
  const age = Number(ageElement.value);
  const name = nameElement.value;
  let outputText = `Your name is ${name} and you are ${age} years old, you are ${age < 18 ? 'not of legal age' : 'of legal age'}`;
  outputElement.innerText = outputText;
});

调整说明 #

• 调整了校验顺序，先做全字段校验，所有校验都通过才会执行后续的年龄判断逻辑
• 补充了成功提示的输出逻辑，将符合要求的提示文本输出到页面上的output元素中
• 统一了DOM的引用方式，都使用提前定义的变量调用，避免全局ID映射的异常问题
• 增加了输入内容的trim处理，避免用户输入空格被判定为有效输入
• 显式将年龄转为数字类型再做比较，避免类型转换导致的判断错误

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