点击提交按钮后推送通知未显示 年龄合法性判断提示无法正常输出

问题原因 #

• 核心逻辑错误：所有输入校验、密码校验都通过后的else分支中，你调用了feedback.forEach，但此时feedback是空数组，遍历逻辑完全不会执行，所以年龄判断的代码根本跑不到。
• 变量使用不规范：已经提前通过getElementById获取了对应DOM元素的变量（比如nameElement、ageElement），后续判断却直接用元素ID作为全局变量调用，这种写法兼容性差，容易出现不可预期的问题。
• 校验逻辑缺陷：用else if串联校验规则，只会提示第一个命中的错误，无法同时展示多个缺失项的提示。
• 年龄值未显式转换：输入框的value默认是字符串类型，虽然和数字比较会触发隐式转换，但显式转成数字更稳妥。

修正后的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");

clickElement.addEventListener("click", function (e) {
    e.preventDefault(); // 提前阻止默认行为，避免表单提交跳转
    let feedback = [];

    // 分开校验，支持同时返回多个错误
    if (nameElement.value.trim() === '') {
        feedback.push('Name input missing');
    }
    if (ageElement.value.trim() === '') {
        feedback.push('Age input missing');
    }
    if (passwordElement.value !== 'IHM') {
        feedback.push('Password is not valid');
    }

    // 所有校验都通过的情况，判断年龄
    if (feedback.length === 0) {
        const age = Number(ageElement.value);
        if (age < 18) {
            feedback.push("You are not of legal age");
        } else {
            feedback.push("You are of legal age");
        }
    }

    // 输出提示
    faultElement.innerText = feedback.join(", ");
});

改动说明 #

• 拆分了校验逻辑，把原来的else if改成独立的if判断，支持同时展示多个错误提示
• 替换了所有直接用ID调用DOM的写法，统一使用提前获取的变量
• 移除了无意义的空数组遍历逻辑，直接在校验全部通过后执行年龄判断
• 显式将年龄输入值转成数字类型，避免字符串比较的异常
• 提前调用preventDefault阻止按钮默认提交行为，避免页面跳转
• 移除了没有用到的冗余users变量

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