JavaScript日期范围校验问题：表单出生日期无法正确识别

Looks like you’re hitting two key issues here—broken date comparison logic and treating date strings as plain text instead of actual date values. Let’s break this down and fix it step by step.

1. Your Current Logic Has a Contradiction #

Right now, your condition checks if the birth date is both ≤ 09/01/2005 AND ≥ 08/31/2006—that’s impossible, since 2005 is earlier than 2006. You almost certainly meant to check if the date falls between those two dates, so the condition should be ≥ startDate AND ≤ endDate (assuming 09/01/2005 is the start of your range and 08/31/2006 is the end).

2. Comparing Date Strings Doesn’t Work #

When you compare date strings directly (like document.myform.dob1.value <= '09/01/2005'), JavaScript treats them as plain text and compares character by character. For example, '10/01/2005' would be considered "less than" '09/01/2006' because the first character '1' comes after '0'—which is totally wrong for dates. You need to convert the input string into a Date object first.

Corrected Code #

Here’s the fixed function with proper date handling and valid logic:

function repeat() {
  // Grab the input date string
  const dobInput = document.myform.dob1.value;
  // Convert input to a Date object (works for MM/DD/YYYY format)
  const dob = new Date(dobInput);
  
  // Define your target date range
  const startDate = new Date('09/01/2005');
  const endDate = new Date('08/31/2006');
  
  // Validate the date and check if it's in range
  if (!isNaN(dob.getTime()) && dob >= startDate && dob <= endDate) {
    document.myform.class1.value = 'Class 1';
  } else {
    document.myform.class1.value = 'Class 2';
  }
}

Key Improvements: #

• Converted strings to Date objects: This lets JavaScript compare dates numerically (by their timestamp) instead of lexicographically.
• Fixed range logic: Now it correctly checks if the birth date falls within your intended interval.
• Added date validation: !isNaN(dob.getTime()) ensures we don’t run comparisons on invalid inputs (like 'abc123' or '13/32/2005').

Bonus: Auto-Trigger on Input Change #

To make this work automatically when the user enters a date, add an onchange event to your date input:

<body>
  <form name="myform" method="post" action="#">
    <!-- Trigger the function when the date is updated -->
    <input type="text" name="dob1" placeholder="MM/DD/YYYY" onchange="repeat()">
    <input type="text" name="class1" readonly>
  </form>
</body>

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