动态表单元素校验问题：无法验证appendChild生成的子元素值

我看你现在遇到的核心问题是用childNodes遍历的时候，会把文本节点（比如换行、空格）也算进去，导致索引i和实际的输入框不匹配，拿不到动态添加元素的正确值。而且依赖getElementById("mobile"+i)的方式也很容易因为元素的增删导致索引混乱，下面给你几个可行的解决方案：

方案一：用children替换childNodes，直接遍历元素节点 #

children只会返回父元素下的元素节点，不会包含文本节点，这样循环的索引就和实际的输入框一一对应了。修改你的校验函数：

function Checkchildlist(){
  // 获取父元素下所有元素节点
  const inputList = document.getElementById("mobiles").children;
  let isAllValid = true;
  
  for (let i = 0; i < inputList.length; i++) {
    // 先确认当前节点是输入框
    if (inputList[i].tagName === "INPUT" && inputList[i].type === "text") {
      const inputValue = inputList[i].value.trim();
      
      // 这里写你的校验逻辑，比如手机号非空+格式校验
      if (!inputValue) {
        alert(`第${i+1}个手机号不能为空`);
        isAllValid = false;
        break;
      }
      // 手机号格式校验正则
      const mobileReg = /^1[3-9]\d{9}$/;
      if (!mobileReg.test(inputValue)) {
        alert(`第${i+1}个手机号格式不正确`);
        isAllValid = false;
        break;
      }
    }
  }
  return isAllValid;
}

方案二：用类名筛选，更灵活（推荐） #

给所有动态添加的输入框统一加个类名，比如dynamic-input，然后用querySelectorAll直接筛选出这些元素，不管怎么增删元素，都能准确拿到目标输入框，完全不用依赖索引：

第一步：动态添加元素时加类名 #

function addNewInput() {
  const parent = document.getElementById("mobiles");
  const newInput = document.createElement("input");
  newInput.type = "text";
  newInput.placeholder = "请输入内容";
  // 添加统一类名
  newInput.classList.add("dynamic-input");
  parent.appendChild(newInput);
}

第二步：校验函数用类名筛选 #

function Checkchildlist(){
  // 获取所有带dynamic-input类的输入框
  const allInputs = document.querySelectorAll("#mobiles .dynamic-input");
  let isAllValid = true;
  
  allInputs.forEach((input, index) => {
    const inputValue = input.value.trim();
    
    // 你的校验规则，比如邮箱格式（如果是邮箱输入框可以换正则）
    const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!inputValue) {
      alert(`第${index+1}个输入框不能为空`);
      isAllValid = false;
      return; // 停止后续遍历
    }
    if (!emailReg.test(inputValue)) {
      alert(`第${index+1}个邮箱格式不正确`);
      isAllValid = false;
      return;
    }
  });
  return isAllValid;
}

为什么你的原代码会出问题？ #

1. childNodes会包含所有子节点，包括你写HTML时的换行、空格（这些都是文本节点），所以循环里的i会对应到这些无效节点，导致getElementById("mobile"+i)找不到正确的元素，或者拿到错误的节点。
2. 如果用户删除了某个中间的输入框，你的mobile+i的id命名规则就会断裂，比如删除了mobile1，剩下的是mobile0、mobile2，这时候循环的i=1时，getElementById("mobile1")就不存在了。

用上面的两种方案，就能完美避开这些问题啦！

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