多步骤表单中JavaScript计算DOB对应年龄的问题

我正在开发一个多步骤表单，第一步让用户输入FirstName、LastName、Gender和出生日期（DOB），需要根据DOB计算年龄并在第二步动态生成的字段中显示。目前动态生成的姓名、性别字段正常，但年龄计算功能失效，控制台显示Parsed birthDate: Invalid Date；移除calculateAge函数后，能在控制台看到正确的DOB数据。

第一步表单代码 #

<div class="col-lg-2 mb-4">
    <div class="form-group">
        <label class="text-label">First Name*</label>
        <input type="text" name="firstName" class="form-control " placeholder="FirstName">
    </div>
</div>

<div class="col-lg-2 mb-4">
    <div class="form-group">
        <label class="text-label">Last Name*</label>
        <input type="text" name="lastName" class="form-control" placeholder="LastName">
    </div>
</div>

<div class="form-group col-md-3">
    <div class="form-group">
        <label class="text-label">Date of Birth*</label>
        <input type="text" name="dob" class=" form-control" placeholder="DateOfBirth" id="mdate-3">
    </div>
</div>

<div class="row"> <!-- 3rd row -->
    <!-- drop dowwn with gender -->
    <div class="form-group col-md-3">
        <label>Select Gender*</label>
        <select class="form-control" id="inputState" name="Gender">
            <option selected disabled>Choose...</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>

    <div class="form-group">
        <label class="text-label">Number of Adults*</label>
        <input type="number" name="numberofAdults" id="numberofAdults" min="0" class="form-control" onchange="addAdultFields()" required>
    </div>
</div>

对应的JavaScript代码 #

// Define a global object to hold form data
var formData = {
  firstName: '',
  lastName: '',
  gender: '',
  dob: ''
};

// Function to save form data
function saveFormData() {
  const firstNameInput = document.querySelector('input[name="firstName"]');
  const lastNameInput = document.querySelector('input[name="lastName"]');
  const genderSelect = document.querySelector('select[name="Gender"]');
  const dobInput = document.querySelector('input[name="dob"]');

  if (firstNameInput) formData.firstName = firstNameInput.value;
  if (lastNameInput) formData.lastName = lastNameInput.value;
  if (genderSelect) formData.gender = genderSelect.value;
  if (dobInput) formData.dob = dobInput.value;

  console.log('Data saved to formData:', formData);
}

// Add event listeners
document.addEventListener('DOMContentLoaded', function() {
  const firstNameInput = document.querySelector('input[name="firstName"]');
  const lastNameInput = document.querySelector('input[name="lastName"]');
  const genderSelect = document.querySelector('select[name="Gender"]');
  const dobInput = document.querySelector('input[name="dob"]');

  if (firstNameInput) firstNameInput.addEventListener('input', saveFormData);
  if (lastNameInput) lastNameInput.addEventListener('input', saveFormData);
  if (genderSelect) genderSelect.addEventListener('change', saveFormData);
  if (dobInput) dobInput.addEventListener('input', saveFormData);
});

// Function to calculate age based on date of birth
function calculateAge(dob) {
  console.log('Calculating age for dob:', dob); // Debugging line
  if (!dob) {
    console.log('DOB is empty');
    return '';
  }
  const birthDate = new Date(dob);
  console.log('Parsed birthDate:', birthDate); // Debugging line
  if (isNaN(birthDate.getTime())) {
    console.log('Invalid date of birth:', dob); // Debugging line
    return '';
  }
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDifference = today.getMonth() - birthDate.getMonth();
  if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  console.log('Calculated age:', age); // Debugging line
  return age;
}

function addAdultFields() {
  var numAdults = parseInt(document.getElementById("numberofAdults").value, 10);
  var parent = document.getElementById("adultFormcontainer");

  // Clear existing form fields
  parent.innerHTML = '';

  for (var i = 0; i < numAdults; i++) {
    var fieldset = document.createElement("fieldset");
    fieldset.style.display = "flex";
    fieldset.style.flexDirection = "row";
    fieldset.style.marginBottom = '100px';
    fieldset.style.paddingTop = '5px';
    fieldset.classList.add("float-left");

    var legend = document.createElement("legend");
    legend.textContent = i === 0 ? "Head of Household" : "Adult " + i;
    fieldset.appendChild(legend);

    var fields = [
      { label: "First Name", name: i === 0 ? "firstName" : "adult" + i + "FirstName", type: "text", value: i === 0 ? formData.firstName : "" },
      { label: "Last Name", name: i === 0 ? "lastName" : "adult" + i + "LastName", type: "text", value: i === 0 ? formData.lastName : "" },
      { label: "Gender", name: i === 0 ? "gender" : "adult" + i + "Gender", type: "select", options: ["Male", "Female"], selected: i === 0 ? formData.gender : "" },
      { label: "Age", name: "age", type: "text", value: i === 0 ? calculateAge(formData.dob) : "" }
    ];

    fields.forEach(field => {
      var label = document.createElement("label");
      label.textContent = field.label;
      fieldset.appendChild(label);

      var input;
      if (field.type === "select") {
        input = document.createElement("select");
        field.options.forEach(optionValue => {
          var option = document.createElement("option");
          option.value = optionValue;
          option.text = optionValue;
          if (optionValue === field.selected) option.selected = true;
          input.appendChild(option);
        });
      } else {
        input = document.createElement("input");
        input.type = field.type;
        input.value = field.value;
      }

      input.name = field.name;
      input.classList.add("form-control", "mb-3");
      fieldset.appendChild(input);
    });

    parent.appendChild(fieldset);
  }
}

// Example call to addAdultFields (ensure this is called after the DOM is loaded)
document.addEventListener('DOMContentLoaded', () => {
  // Call this function as needed, e.g., on some event or user action
  document.getElementById("numberofAdults").addEventListener('change', addAdultFields);
});

第二步年龄显示容器代码 #

<div id="adultFormcontainer"></div>

解决方案 #

1. 改用标准日期输入类型 #

new Date()对非标准日期格式解析兼容性差，直接将DOB输入框改为date类型，强制用户输入YYYY-MM-DD格式的标准日期：

<input type="date" name="dob" class="form-control" id="mdate-3">

这种方式下，new Date(dob)能直接正确解析日期。

2. 手动解析非标准日期（保留text输入时） #

如果必须使用text类型输入框，手动处理常见的日期格式（如MM/DD/YYYY或DD/MM/YYYY）：

function calculateAge(dob) {
  console.log('Calculating age for dob:', dob);
  if (!dob) {
    console.log('DOB is empty');
    return '';
  }
  
  let birthDate;
  // 处理MM/DD/YYYY格式
  if (dob.includes('/')) {
    const [month, day, year] = dob.split('/');
    // 月份从0开始，需减1
    birthDate = new Date(year, month - 1, day);
  } else {
    birthDate = new Date(dob);
  }
  
  console.log('Parsed birthDate:', birthDate);
  if (isNaN(birthDate.getTime())) {
    console.log('Invalid date of birth:', dob);
    return '';
  }
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDifference = today.getMonth() - birthDate.getMonth();
  if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  console.log('Calculated age:', age);
  return age;
}

3. 实时更新年龄 #

当DOB输入变化时，自动重新生成成人字段，确保年龄实时更新：
修改saveFormData函数，在更新DOB后触发字段刷新：

function saveFormData() {
  const firstNameInput = document.querySelector('input[name="firstName"]');
  const lastNameInput = document.querySelector('input[name="lastName"]');
  const genderSelect = document.querySelector('select[name="Gender"]');
  const dobInput = document.querySelector('input[name="dob"]');
  const numAdultsInput = document.getElementById("numberofAdults");

  if (firstNameInput) formData.firstName = firstNameInput.value;
  if (lastNameInput) formData.lastName = lastNameInput.value;
  if (genderSelect) formData.gender = genderSelect.value;
  if (dobInput) formData.dob = dobInput.value;

  console.log('Data saved to formData:', formData);
  
  // 若已输入成人数量，重新生成字段更新年龄
  if (numAdultsInput.value > 0) {
    addAdultFields();
  }
}

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