HTML+JavaScript实现人员信息列表展示与年龄校验功能

一、两段代码整合方法 #

把「获取输入创建person实例」「渲染页面表格」两段逻辑串入同一个提交触发链路即可，执行顺序如下：

• 给录入按钮绑定点击事件，或者给表单绑定submit事件，作为整个录入流程的触发入口
• 事件触发后先读取fullname、age、amka三个输入框的取值，先做输入校验
• 校验通过后执行你写的第一段逻辑：用拿到的取值创建person实例
• 新建的person实例存入全局维护的人员数组，所有历史录入数据都存在这个数组里，避免新录入内容覆盖旧数据
• 执行你写的第二段逻辑：遍历人员数组，把所有条目渲染到页面下方的表格中
• 清空输入框内容，等待下一次录入

不要每次录入只往表格插入单行，基于全量数据重渲染表格的写法更稳定，不会出现页面展示和实际存储数据不一致的问题，后续要加删除、编辑功能也更方便。

二、年龄校验逻辑实现 #

该逻辑用if判断实现即可，不需要使用for循环：for循环的适用场景是对一组数据做重复遍历操作，这里只需要对单次提交的年龄值做单次条件判断，if分支完全可以满足需求。
具体实现位置放在「读取输入取值之后、创建person实例之前」：

• 先把输入框取到的age值转为数字类型（输入框默认返回字符串，直接比较大小会出现逻辑错误）
• 写if判断分支：如果转换后的年龄值小于18，直接终止后续提交逻辑，可以同步给用户弹出提示说明不符合录入要求
• 只有年龄大于等于18的情况，才继续往下执行创建实例、存储数据、渲染表格的流程

核心代码参考（保留所有原有技术标识符写法） #

<!-- 录入区域与表格结构，可直接替换为你已写的HTML代码 -->
<div class="form-area">
  <input type="text" id="fullname" placeholder="请输入姓名">
  <input type="number" id="age" placeholder="请输入年龄">
  <input type="text" id="amka" placeholder="请输入AMKA">
  <button id="submitBtn">提交录入</button>
</div>
<table id="resultTable" border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>AMKA</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

// 全局存储所有录入人员的数组
const personList = []

// 绑定提交事件
document.getElementById('submitBtn').addEventListener('click', () => {
  // 获取输入值
  const fullname = document.getElementById('fullname').value.trim()
  const age = Number(document.getElementById('age').value.trim())
  const amka = document.getElementById('amka').value.trim()

  // 年龄校验：if判断，不满足条件直接return终止流程
  if (age < 18) {
    alert('录入失败：年龄需满18周岁')
    return
  }

  // 原有第一段逻辑：创建person实例
  const person = {
    fullname,
    age,
    amka
  }

  // 新实例存入列表
  personList.push(person)

  // 原有第二段逻辑：渲染内容到表格
  const tableBody = document.querySelector('#resultTable tbody')
  // 清空表格旧内容
  tableBody.innerHTML = ''
  // 遍历全量数据渲染行
  personList.forEach(item => {
    const row = document.createElement('tr')
    row.innerHTML = `
      <td>${item.fullname}</td>
      <td>${item.age}</td>
      <td>${item.amka}</td>
    `
    tableBody.appendChild(row)
  })

  // 清空输入框
  document.getElementById('fullname').value = ''
  document.getElementById('age').value = ''
  document.getElementById('amka').value = ''
})

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