JS实现表单验证时alert弹窗无法正常触发是什么原因？

存在的错误点 #

• 事件绑定错误：addEventListener的事件名应为click而非onclick，且回调函数不能加括号，加括号会导致页面加载时立即执行函数而非点击时触发
• 输入值获取错误：代码中userName、userAge是DOM元素对象，需要通过.value属性才能获取输入框内的实际内容
• 条件判断逻辑顺序错误：同时不满足姓名和年龄规则的判断放在了最后，前面的单条件判断会优先触发，导致该分支永远无法执行
• 校验逻辑遗漏：没有阻止表单的默认提交行为，就算触发校验，表单也会直接跳转提交

修正后的完整代码 #

<body>
    <form method="POST">
        <label for="name">姓名: </label>
        <input type="text" name="name" id="name" value="John"><br>
        <label for="age">年龄: </label>
        <input type="number" name="age" id="age"><br>
        <input type="submit" value="提交" class="submit">
    </form>
    <p id="demo"></p>

    <script>
        var userName = document.getElementById('name');
        var userAge = document.getElementById('age');
        // 绑定表单提交事件比全局点击更符合业务逻辑
        document.querySelector('form').addEventListener("submit", function(e) {
            // 阻止表单默认提交行为
            e.preventDefault();
            // 实时获取最新输入值并去除首尾空格
            const nameVal = userName.value.trim();
            const ageVal = parseInt(userAge.value.trim());
            // 多条件联合判断放在最前优先执行
            if (nameVal.length < 5 && ageVal < 18) {
                alert("姓名需至少输入5个字符，且年龄需大于18岁");
            } else if (nameVal.length < 5) {
                alert("姓名需至少输入5个字符");
            } else if (isNaN(ageVal) || ageVal < 18) {
                alert("年龄需大于18岁");
            } else {
                // 校验通过后可执行后续提交逻辑
                alert("校验通过");
                this.submit();
            }
        })
    </script>
</body>

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