如何验证拆分的日、月、年独立日期输入字段？

现有问题 #

当前仅实现了非空校验，无法确保输入的日、月、年是合法的日期值——比如输入32作为日、13作为月都能通过校验，需要补充完整的有效性验证逻辑。

原有代码 #

ASP.NET 前端代码 #

<div class='p-0 m-0'>
  <label class='form-label QstFonts mx-5'>What is your date of birth?</label>
  <div class='mt-5 mb-2 d-flex align-items-center justify-content-center'>
    <input
      asp-for='HLApplication.Day'
      id='txtbox1'
      onkeyup="GnderTextboxsValidation('txtbox1','txtbox2','txtbox3','genderButton')"
      class='input-text col-lg-3 col-2 m-lg-2 m-2 py-4'
      required
      maxlength='2'
      placeholder='DD'
    />
    <span> / </span>
    <input
      asp-for='HLApplication.Month'
      id='txtbox2'
      onkeyup="GnderTextboxsValidation('txtbox1','txtbox2','txtbox3','genderButton')"
      class='input-text col-lg-3 col-2 m-lg-2 m-2 py-4'
      required
      maxlength='2'
      placeholder='MM'
    />
    <span> / </span>
    <input
      asp-for='HLApplication.Year'
      id='txtbox3'
      onkeyup="GnderTextboxsValidation('txtbox1','txtbox2','txtbox3','genderButton')"
      class='input-text col-lg-3 col-2 m-lg-2 m-2 py-4'
      required
      maxlength='4'
      placeholder='YYYY'
    />
  </div>
  <div class='row p-0 m-0'>
    <div class='col-12  p-0 m-0'>
      <div class='p-0 mx-5 row m-auto d-flex'>
        <button
          id='genderButton'
          disabled
          type='button'
          onclick="HairLossClick('37','38'); SubmitForm();"
          class='btn btn-primary my-lg-4 my-1 py-3 h-25 m-auto'
        >
          Continue
        </button>
      </div>
    </div>
  </div>
</div>

注：修正了原代码中requird的拼写错误，改为标准的required

原有验证JS代码 #

function GnderTextboxsValidation(txtbox1, txtbox2, txtbox3, Button) {
    if (document.getElementById(txtbox1).value === "" ||
        document.getElementById(txtbox2).value === "" ||
        document.getElementById(txtbox3).value === "") {
        document.getElementById(Button).disabled = true;
    } else {
        document.getElementById(Button).disabled = false;
    }
}

完善后的验证逻辑 #

以下是补充了完整有效性校验的JS函数，包含多层校验逻辑：

• 字段非空+数字格式校验
• 月份范围（1-12）校验
• 年份范围（示例为1900至当前年份，可按需调整）校验
• 根据年月判断日期合法性（自动处理闰年2月等特殊情况）

function GnderTextboxsValidation(txtbox1, txtbox2, txtbox3, Button) {
    const dayInput = document.getElementById(txtbox1);
    const monthInput = document.getElementById(txtbox2);
    const yearInput = document.getElementById(txtbox3);
    const submitBtn = document.getElementById(Button);

    const day = parseInt(dayInput.value);
    const month = parseInt(monthInput.value);
    const year = parseInt(yearInput.value);

    let isValid = true;

    // 1. 非空+数字格式校验
    if (isNaN(day) || isNaN(month) || isNaN(year) || 
        dayInput.value === "" || monthInput.value === "" || yearInput.value === "") {
        isValid = false;
    }

    // 2. 月份范围校验
    if (month < 1 || month > 12) {
        isValid = false;
    }

    // 3. 年份范围校验
    const currentYear = new Date().getFullYear();
    if (year < 1900 || year > currentYear) {
        isValid = false;
    }

    // 4. 日期合法性校验（自动计算当月最大天数）
    if (isValid) {
        const maxDaysInMonth = new Date(year, month, 0).getDate();
        if (day < 1 || day > maxDaysInMonth) {
            isValid = false;
        }
    }

    // 控制提交按钮状态
    submitBtn.disabled = !isValid;
}

可选优化：添加错误提示 #

如果需要给用户明确的错误反馈，可在HTML中添加提示元素：

<div id="dateError" class="text-danger mx-5" style="display: none;">请输入合法的出生日期</div>

然后在JS函数中补充提示显示逻辑：

// 在函数开头获取错误提示元素
const errorMsg = document.getElementById("dateError");

// 在最后根据校验结果控制提示显示
errorMsg.style.display = isValid ? "none" : "block";

内容的提问来源于stack exchange，提问作者IR' Shah