如何在HTML中显示日期验证结果？已有函数但无法关联页面展示

问题修正与实现步骤 #

1. 修正DOM元素获取错误：document.getElementById()参数不需要加#，直接传入ID字符串即可，原代码里的"#firstDate"这类写法会导致无法获取目标元素。
2. 封装通用验证函数：创建统一的验证更新函数，接收输入框和对应提示span元素，复用验证逻辑与消息更新流程，避免重复代码。
3. 绑定触发时机：页面加载完成后自动执行一次验证，同时给输入框绑定input事件，实时响应内容变化更新提示信息。

修改后的完整代码 #

HTML部分（无需改动）

<label class="popup-date-label">
    <span class="popup-label-text">Дата заезда:</span>
    <input type="text" id="firstDate" class="popup-first-date" value="27 апреля 2020">
    <span class="date-state" id="firstDateState"></span>
</label>
<label class="popup-date-label">
    <span class="popup-label-text">Дата выезда:</span>
    <input type="text" id="secondDate" class="popup-second-date" value="1 сентября 2023">
    <span class="date-state" id="secondDateState"></span>
</label>

JavaScript部分

function getAvailability(dateInput) {
    let answer;
    const day = new Date().getDate();
    const month = new Date().getMonth();
    const year = new Date().getFullYear();
    const currentDate = [day, month, year];
    let userDate = dateInput.split(' ');
    let Months = [
        'январ',
        'феврал',
        'март',
        'апрел',
        'ма',
        'июн',
        'июл',
        'август',
        'сентябр',
        'ноябр',
        'декабр',
    ];
    userDate = [
        parseInt(userDate[0], 10),
        Months.indexOf(userDate[1].slice(0, -1)) + 1,
        parseInt(userDate[2], 10)
    ];

    answer = "succes";
    for (let i = 2; i >= 0; i--) {
        if (currentDate[i] > userDate[i]) {
            answer = "dateMismatch";
            break;
        }
    }

    return answer;
}

function createMessage(answer) {
    let message;

    if (answer === "succes") {
      message = "На эти даты есть свободные номера. Пока есть.";
    } else if (answer === "dateMismatch") {
      message = "Мы не можем отправить вас в прошлое.";
    }

    return message;
}

// 修正DOM元素获取
const firstDate = document.getElementById("firstDate");
const secondDate = document.getElementById("secondDate");
const firstDateState = document.getElementById("firstDateState");
const secondDateState = document.getElementById("secondDateState");

// 封装通用验证更新函数
function updateDateMessage(inputEl, stateEl) {
    const dateValue = inputEl.value.trim();
    if (!dateValue) {
        stateEl.textContent = "";
        return;
    }
    const result = getAvailability(dateValue);
    stateEl.textContent = createMessage(result);
}

// 页面加载时初始化验证
window.addEventListener('load', () => {
    updateDateMessage(firstDate, firstDateState);
    updateDateMessage(secondDate, secondDateState);
});

// 输入框内容变化时实时验证
firstDate.addEventListener('input', () => updateDateMessage(firstDate, firstDateState));
secondDate.addEventListener('input', () => updateDateMessage(secondDate, secondDateState));

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