JavaScript宠物CRUD中number类型输入无法提交问题排查

核心问题原因 #

• number输入框验证规则冲突：你给年龄输入框设置了max="0"和min="20"，这要求输入值必须同时满足≤0且≥20，没有任何数字能符合这个矛盾的条件。浏览器原生表单验证会直接拦截提交操作，自动将焦点定位到不符合规则的字段，导致onFormSubmit()函数根本无法执行，所以数据无法提交。
• 额外存在两处代码逻辑错误，会在验证问题解决后引发功能异常：
  1. updateRecord函数中，selectedRow.cells[3].innerHTML = petData.obs;字段名错误，readFormData中定义的键是observations，并非obs。
  2. onDelete函数中，document.getElementById("employeeList")的ID写错，表格实际ID是pets，会导致删除功能报错。

修复步骤 #

1. 修正年龄输入框的验证范围 #

将max和min调换，设置合理的年龄范围（比如0到20）：

<label for="age">Age: </label><input type="number" name="age" id="age" min="0" max="20"/><br>

2. 修正updateRecord函数的字段引用 #

function updateRecord(petData) {
  selectedRow.cells[0].innerHTML = petData.name;
  selectedRow.cells[1].innerHTML = petData.race;
  selectedRow.cells[2].innerHTML = petData.age;
  selectedRow.cells[3].innerHTML = petData.observations; // 修正为正确的字段名
}

3. 修正onDelete函数的表格ID #

function onDelete(register) {
  if (confirm("Are you sure to delete this record ?")) {
    row = register.parentElement.parentElement;
    document.getElementById("pets").deleteRow(row.rowIndex); // 修正为正确的表格ID
    resetForm();
  }
}

验证修复效果 #

修正后输入符合范围的年龄值（如1-20之间的数字），点击提交按钮即可正常将数据添加到表格，编辑、删除功能也能正常运行。

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