使用JavaScript验证PHP循环生成的多输入字段报错如何解决

问题核心原因 #

• 你的验证函数硬编码仅查询id为3的输入框，完全没有遍历循环生成的所有输入字段，根本实现不了多字段校验
• 现有判断逻辑是恒成立的死逻辑：你定义了const a=-10，判断a<0永远为真，所以不管输入什么都会触发错误提示，完全没用到输入框的实际值做校验
• 你遇到的undefined和null报错，本质是document.getElementById("3")没拿到元素：当该方法返回null时，读取.value会返回undefined，读取.getAttribute("name")会返回null，和你遇到的报错完全对应。拿不到元素大概率是输入框外层表格结构不完整（缺<table>、<tr>标签）导致DOM解析异常，或者页面存在重复id的元素

修正方案 #

1. 调整JS校验逻辑，遍历所有输入字段 #

以下示例是校验所有输入为大于等于-10的整数，你可以根据自己的校验规则修改判断条件：

function ValidationSubmit() {
  // 遍历所有循环生成的id从0到10的输入框
  for(let i=0; i<=10; i++) {
    const inputEl = document.getElementById(String(i));
    // 拿不到元素直接提示
    if(!inputEl) {
      document.getElementById('demo').innerHTML = "* Wrong insert : 未找到对应输入框, position: " + i;
      return false;
    }
    const inputVal = inputEl.value.trim();
    const DatabaseIndex = inputEl.getAttribute("name");
    // 自定义校验规则示例：校验是否是大于等于-10的整数
    const numVal = Number(inputVal);
    if(isNaN(numVal) || numVal < -10) {
      document.getElementById('demo').innerHTML = "* Wrong insert : " + inputVal + ", position: " + DatabaseIndex ;
      return false;
    }
  }
  // 所有校验通过提交表单
  return true;
}

2. 确认HTML结构合法 #

你循环输出的是<td>元素，必须嵌套在<tr>、<table>标签内，否则DOM解析会出错导致getElementById拿不到元素，结构示例如下：

echo '<table><tr>';
$j = 0;
$value = array_fill(0, 11, ''); // 提前初始化value数组避免PHP告警
while($j<=10) {
  $ID = strval($j);
  echo "<td><input type='text' id='$ID' name='$ID' value='".$value[$j]."'  ></td>";
  $j++;
}
echo '</tr></table>';

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