JavaScript onClick事件下年龄校验逻辑问题求助（姓名校验已实现）

问题分析 #

原年龄校验存在以下核心问题：

• 数字转换写法错误（age.parseInt 并非正确的调用方式）
• 校验顺序颠倒（先判断范围再校验是否为数字，逻辑完全混乱）
• 非数字校验逻辑失效（while (String(age)) 无法识别非数字输入）
• 范围判断与提示文案不一致（代码判断上限为100但提示是120）
• 未将验证通过的年龄存入userdetails对象

修正后的完整代码 #

let userdetails = {};

document.getElementById("btn1").onclick = function() {
  // 姓名校验（保留原有已正常工作的逻辑，优化提示文案与循环效率）
  let username = prompt("请输入姓名");
  while (!isNaN(username)) {
    username = prompt("姓名不能包含数字，请重新输入");
  }
  while (username.length < 1 || username.length > 8) {
    username = prompt("姓名长度需在1-8字符之间，请重新输入");
  }
  userdetails.username = username;

  // 修正后的年龄校验逻辑
  let age;
  while (true) {
    age = prompt("请输入年龄");
    // 第一步：校验是否为有效数字
    const ageNum = parseInt(age);
    if (isNaN(ageNum)) {
      alert("请输入有效的数字年龄");
      continue;
    }
    // 第二步：校验年龄范围是否符合要求
    if (ageNum < 16 || ageNum > 120) {
      alert("年龄需在16-120之间，请重新输入");
      continue;
    }
    // 所有校验通过，跳出循环
    break;
  }
  // 将验证通过的年龄存入用户信息对象
  userdetails.age = parseInt(age);
  // 可选：控制台输出验证结果
  console.log("已保存的用户信息：", userdetails);
}

关键修正说明 #

• 正确的数字转换：使用parseInt()将输入转换为数字，并用isNaN()判断转换结果是否有效
• 优化循环逻辑：采用单循环嵌套多判断的方式，避免多循环导致的逻辑混乱，同时确保所有规则校验完成后才退出
• 规则一致性：统一年龄范围为16-120，与提示文案完全匹配
• 完成数据存储：将验证通过的年龄存入userdetails对象，实现需求中的数据持久化
• 用户体验优化：调整提示文案为更清晰的中文表述，减少用户误解

内容的提问来源于stack exchange，提问作者Dick long hart