HTML/JS 客户端年龄与婚姻状况联合验证教程

<form id="myForm">
  <label for="iestadocivil">婚姻状况:</label>
  <select id="iestadocivil" required>
    <option value="">请选择</option>
    <option value="solteiro">单身</option>
    <option value="casado">已婚</option>
    <option value="divorciado">离异</option>
  </select>
  <br><br>

  <label for="inascimento">出生日期:</label>
  <input type="date" name="nascimento" id="inascimento" required>
  <br><br>

  <input type="submit" value="提交">

  <!-- 用于显示验证消息的元素 -->
  <span id="isucesso" style="color: green;"></span>
  <span id="ifalha" style="color: red;"></span>
  <div id="conteudo" style="margin-top: 10px;"></div>
</form>

function validarDados() {
  // 获取 DOM 元素
  const estadocivilSelect = document.getElementById('iestadocivil');
  const inascimentoInput = document.getElementById('inascimento');
  const sucessoSpan = document.getElementById('isucesso');
  const falhaSpan = document.getElementById('ifalha');
  const conteudoDiv = document.getElementById('conteudo');

  const estadocivil = estadocivilSelect.value;
  const inascimento = inascimentoInput.value; // 获取日期字符串 'YYYY-MM-DD'

  // 1. 清除所有之前的消息，确保每次验证都是全新的反馈
  sucessoSpan.innerHTML = '';
  falhaSpan.innerHTML = '';
  conteudoDiv.innerHTML = '';

  // 2. 基础验证：检查是否选择了婚姻状况和出生日期
  if (estadocivil === '') {
    falhaSpan.innerHTML = '请选择您的婚姻状况。';
    return false;
  }
  if (!inascimento) {
    falhaSpan.innerHTML = '请选择您的出生日期。';
    return false;
  }

  // 3. 计算年龄
  const dataAtual = new Date();
  const dataNascimento = new Date(inascimento);

  let idadeCalculada = dataAtual.getFullYear() - dataNascimento.getFullYear();
  const mesAtual = dataAtual.getMonth();
  const mesNascimento = dataNascimento.getMonth();
  const diaAtual = dataAtual.getDate();
  const diaNascimento = dataNascimento.getDate();

  // 调整年龄：如果生日还没到，年龄减一
  if (mesAtual < mesNascimento || (mesAtual === mesNascimento && diaAtual < diaNascimento)) {
    idadeCalculada--;
  }

  // 4. 根据婚姻状况执行条件验证
  if (estadocivil === 'solteiro') {
    // 如果是“单身”，需要年龄大于 15 岁
    if (idadeCalculada < 15) {
      conteudoDiv.innerHTML = `您当前年龄为 ${idadeCalculada} 岁。选择“单身”时，年龄必须大于15岁。`;
      falhaSpan.innerHTML = '验证失败：年龄不符合要求。';
      return false; // 验证失败
    } else {
      sucessoSpan.innerHTML = `验证成功：您当前年龄为 ${idadeCalculada} 岁，符合“单身”要求。`;
      return true; // 验证成功
    }
  } else {
    // 如果不是“单身”（已婚、离异等），则无需特定年龄限制，直接通过
    sucessoSpan.innerHTML = `验证成功：您的婚姻状况为“${estadocivil}”，无需特定年龄限制。`;
    return true; // 验证成功
  }
}

// 页面加载完成后，绑定事件监听器
window.addEventListener("DOMContentLoaded", () => {
  const myForm = document.getElementById("myForm");
  const estadocivilSelect = document.getElementById('iestadocivil');
  const inascimentoInput = document.getElementById('inascimento');

  // 监听表单提交事件
  myForm.addEventListener("submit", (e) => {
    const isValid = validarDados(); // 执行验证
    if (!isValid) {
      e.preventDefault(); // 如果验证失败，阻止表单提交
    }
  });

  // 监听婚姻状况和出生日期的改变事件，提供实时反馈
  estadocivilSelect.addEventListener('change', validarDados);
  inascimentoInput.addEventListener('change', validarDados);
});