JavaScript实现年龄与国家双重验证问题求助

你的代码目前仅实现了年龄验证，未处理国家选择的校验，同时HTML结构存在两处小问题：select标签重复设置了id属性，button标签包含无效的重复属性。以下是修正后的完整代码及说明：

修正后的HTML #

<form name="verify">
  <ul>
    <li>
      <p style="margin-left: 90px;">Please confirm age and country</p>
    </li>
    <li>
      <label for="age">Age:</label><input id="age" type="number">
    </li>
    <li>
      <label for="country">Country:</label>
      <select id="country" class="dropdown">
        <option value="select">--Select--</option>
        <option value="nz">New Zealand</option>
        <option value="aus">Australia</option>
        <option value="fiji">Fiji</option>
      </select>
    </li>
    <li class="button">
      <button type="button" onclick="check()">Submit</button>
    </li>
  </ul>
</form>

修正后的JavaScript #

function check(){
    const age = Number(document.getElementById("age").value);
    const country = document.getElementById("country").value;

    // 验证年龄：必须是数字且不小于18
    if (isNaN(age) || age < 18) {
        alert("Sorry you are not able to shop with us - you must be at least 18 years old");
        return;
    }

    // 验证国家：必须选择有效选项
    if (country === "select") {
        alert("Please select your country");
        return;
    }

    // 双重验证通过
    alert("Thank you, you may continue shopping");
}

关键修改说明 #

• HTML优化：

  • 给年龄输入框添加type="number"，限制用户只能输入数字，避免非数字输入导致验证异常
  • 移除select标签重复的id属性，确保label的for属性与对应元素id一致
  • 清理button标签内无效的重复属性，保持代码规范

• JavaScript逻辑补充：

  • 新增国家选择校验，确保用户未停留在默认的"--Select--"选项
  • 增加isNaN(age)判断，处理用户输入非数字的情况
  • 分步骤验证，每一步不通过时弹出对应提示并终止函数，避免后续逻辑执行
  • 仅当年龄≥18且选择有效国家时，才允许继续购物

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