表单确认密码校验仅首行生效，如何让动态新增行也支持校验功能

问题根因 #

你现在的代码存在两个核心问题导致仅第一行生效：

1. 依赖唯一ID选择元素：DOM规范要求ID全局唯一，你新增的行如果重复使用password、confirm_password作为ID，document.getElementById永远只会返回第一个匹配到的元素，也就是第一行的输入框
2. 没有使用事件委托：你原本的校验事件只会绑定到页面初始加载时已存在的元素上，后续动态新增的元素不会自动绑定该事件

修改方案 #

第一步：调整HTML结构约定

所有密码行统一使用类名标识，同组的两个密码框用同一个父容器包裹，结构示例如下：

<!-- 所有密码行的外层固定容器，页面初始加载时就存在 -->
<div id="password-group-container">
  <!-- 单组密码行结构，动态新增的行也按照此结构生成 -->
  <div class="password-row">
    <input type="password" class="password-input" placeholder="输入密码">
    <input type="password" class="confirm-password-input" placeholder="确认密码">
  </div>
</div>

第二步：修改JS逻辑为事件委托实现

直接把事件绑定到外层固定存在的容器上，利用事件冒泡机制处理所有行（包括动态新增行）的校验逻辑：

// 绑定到外层固定容器，监听所有子元素的输入事件
document.querySelector('#password-group-container').addEventListener('input', function(e) {
  const target = e.target;
  // 匹配当前触发事件的是密码输入框或者确认密码输入框
  if (target.classList.contains('password-input') || target.classList.contains('confirm-password-input')) {
    // 找到当前输入框所属的行容器
    const currentRow = target.closest('.password-row');
    const pwdVal = currentRow.querySelector('.password-input').value;
    const confirmPwdVal = currentRow.querySelector('.confirm-password-input').value;
    const confirmInput = currentRow.querySelector('.confirm-password-input');
    // 执行校验
    confirmInput.style.backgroundColor = pwdVal === confirmPwdVal ? 'green' : 'red';
  }
})

注意事项 #

• 后续动态新增密码行时，不需要额外绑定校验事件，只要按照约定的结构插入到#password-group-container中即可自动触发校验
• 不要给多个DOM元素设置相同的ID，避免出现选择器匹配异常

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