如何在JavaScript中验证动态添加的Input与Textarea？

针对你遇到的动态新增表单元素无法触发验证逻辑的问题，有两种直接可行的解决思路：

方法一：事件委托（推荐） #

利用事件冒泡机制，把验证事件绑定到表单元素的父容器上，而非单个输入框。这样不管是初始存在的还是后续新增的元素，只要触发对应事件，都会被父容器捕获并执行验证。

示例代码：

// 假设所有经验表单的父容器类名为experience-forms-container
const container = document.querySelector('.experience-forms-container');

// 监听输入/失焦事件，按需选择
container.addEventListener('input', function(e) {
  const target = e.target;
  // 根据元素类名匹配对应的验证函数
  if (target.classList.contains('position-input')) {
    validatePosition(target); // 你已编写的职位验证函数
  } else if (target.classList.contains('employer-input')) {
    validateEmployer(target); // 你已编写的雇主验证函数
  } else if (target.classList.contains('date-input')) {
    validateDate(target); // 你已编写的日期验证函数
  } else if (target.classList.contains('description')) {
    validateDescription(target); // 你已编写的描述验证函数
  }
});

方法二：创建元素时直接绑定验证事件 #

在动态生成表单元素的函数里，每创建一个输入框/文本域，就直接给它绑定对应的验证事件。

示例代码：

// 新增经验表单的按钮点击事件
document.querySelector('.more-experience-btn').addEventListener('click', function() {
  // 创建职位输入框
  const positionInput = document.createElement('input');
  positionInput.classList.add('position-input');
  // 绑定验证事件（input/blur按需选择）
  positionInput.addEventListener('blur', () => validatePosition(positionInput));
  
  // 创建雇主输入框
  const employerInput = document.createElement('input');
  employerInput.classList.add('employer-input');
  employerInput.addEventListener('input', () => validateEmployer(employerInput));
  
  // 同理创建日期输入框、描述文本域并绑定对应验证函数
  
  // 将所有元素添加到父容器
  document.querySelector('.experience-forms-container').append(
    positionInput,
    employerInput,
    // ...其他元素
  );
});

补充：表单提交时批量验证 #

如果不需要实时验证，仅在表单提交时检查所有元素，可直接遍历所有对应类名的元素，逐个执行验证：

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  let isFormValid = true;
  
  // 验证所有职位输入框
  document.querySelectorAll('.position-input').forEach(input => {
    if (!validatePosition(input)) isFormValid = false;
  });
  // 验证所有雇主输入框
  document.querySelectorAll('.employer-input').forEach(input => {
    if (!validateEmployer(input)) isFormValid = false;
  });
  // 同理验证日期输入框和描述文本域
  
  if (isFormValid) {
    // 验证通过，提交表单
    this.submit();
  }
});

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