Date对象返回无效日期问题求助：无法计算用户年龄

你的代码里birthVal始终返回Invalid Date的核心原因是：页面刚加载时就立即获取了date输入框的value，此时用户还未选择任何日期，birthday是空字符串，new Date("")自然会返回无效日期。

此外还有几个影响功能的问题：

• currentDate在页面初始化时就固定了，不会随用户提交时间更新
• dateDiff函数里没有读取用户提交时的最新日期值
• 显示结果时直接写死了fname lname，没有使用用户输入的真实姓名
• 表单验证逻辑有问题：即使验证通过，else分支里的event.preventDefault()也会阻止表单默认提交；且多个验证错误会弹出多个alert，体验不佳

1. 延迟获取日期值：不在页面加载时读取date输入框的value，而是在用户提交表单时再获取最新选择值
2. 实时获取当前时间：将currentDate的计算移到dateDiff函数内部，确保每次提交都用最新的当前时间
3. 动态填充姓名：在显示结果时使用fname.value和lname.value获取用户输入的真实姓名
4. 修正表单验证逻辑：用hasErrors变量统一管理错误状态，整合所有错误信息一次性提示；统一阻止表单默认提交，仅在验证通过后执行后续逻辑

<div id="container">
    <form id="form">
        <label for="fname">First name:</label>
        <input type="text" name="fname" id="fname"><br>
        <label for="lname">Last name:</label>
        <input type="text" name="lname" id="lname"><br>
        <label for="userId">User ID:</label>
        <input type="text" name="userId" id="userId" required><br>
        <label for="userBirthday">Birthday</label>
        <input type="date" id="date" name="userBirthday"><br>
        <button type="submit" id="submit">Accept</button>
    </form>
    <div id="displayWindow"></div>
</div>

<script>
    const container = document.getElementById("container")
    const displayW = document.getElementById("displayWindow")
    const uid = document.getElementById("userId")
    const fname = document.getElementById("fname")
    const lname = document.getElementById("lname")
    const dateInput = document.querySelector("input[type='date']")
    const form = document.getElementById("form")

    function inputValidation() {
        let lowerCase = /[a-z]/g
        let upperCase = /[A-Z]/g
        let userNum = /[0-9]/g
        let hasErrors = false
        let errorMessages = []

        if (uid.value.length < 7 || uid.value.length > 12) {
            errorMessages.push("User ID must be between seven and twelve characters")
            hasErrors = true
        }
        if (!(uid.value.match(lowerCase)) || !(uid.value.match(upperCase))) {
            errorMessages.push("User ID must contain at least one lowercase and uppercase letter")
            hasErrors = true
        }
        if (!(uid.value.match(userNum))) {
            errorMessages.push("User ID must contain at least one number")
            hasErrors = true
        }
        if (!dateInput.value) {
            errorMessages.push("Please select your birthday")
            hasErrors = true
        }

        if (hasErrors) {
            alert(errorMessages.join("\n"))
            return false
        }
        return true
    };

    function dateDiff() {
        const birthday = dateInput.value
        const birthVal = new Date(birthday);
        const currentDate = Date.now();
        const difference = currentDate - birthVal;
        const differenceInDays = Math.round(difference / (1000 * 60 * 60 * 24));
        
        // 修正年龄判断逻辑：6574天约等于18年，未满18天则提示年龄不足
        if (differenceInDays < 6574) {
            displayW.innerHTML = `You are probably not old enough to take this class!`;
        } else {
            displayW.innerHTML = `${fname.value} ${lname.value}, you have been breathing for ${differenceInDays} days!`;
        }
    }

    form.addEventListener("submit", (event) => {
        event.preventDefault(); // 统一阻止表单默认提交，自定义处理流程
        const isValid = inputValidation();
        if (isValid) {
            dateDiff();
        }
    });
</script>

• 修正了原代码中年龄判断的逻辑错误：原代码中differenceInDays > 6574时提示"不够年龄"，但6574天约等于18年，应该是小于6574天时才是未满18岁
• 增加了日期选择的必填验证，避免用户未选日期就提交
• 用错误消息数组整合所有验证错误，一次性弹出提示，提升用户体验

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