表单验证仅作用于单个字段的问题排查求助

你的判断完全正确——问题就出在querySelector('.form_row')上：这个方法只会返回页面中第一个匹配.form_row选择器的元素，所以所有验证逻辑都被绑定到了Full Name所在的第一行，其他字段根本没触发验证，错误提示自然也只会显示在第一个行里。

具体修复步骤 #

1. 获取所有表单行：把querySelector('.form_row')改成querySelectorAll('.form_row')，这样能拿到页面中所有的表单行元素。
2. 遍历绑定独立逻辑：对每个表单行单独处理，确保每个字段的输入框、错误提示都是当前行内的元素，不会跨串。
3. 按字段区分验证规则：通过输入框的name属性判断当前是哪个字段，应用对应的验证条件。

修改后的核心JavaScript代码示例 #

// 获取所有表单行元素
const allFormRows = document.querySelectorAll('.form_row');

// 遍历每个表单行，绑定验证逻辑
allFormRows.forEach(row => {
  // 只在当前行内查找输入框和错误提示元素
  const inputField = row.querySelector('input');
  const errorElement = row.querySelector('.error');

  // 给当前输入框绑定失焦验证事件
  inputField.addEventListener('blur', () => {
    // 根据输入框的name属性，执行对应字段的验证规则
    switch(inputField.name) {
      case 'fullname':
        if(inputField.value.trim() === '') {
          errorElement.textContent = 'Full Name cannot be empty';
          inputField.classList.add('invalid');
        } else {
          errorElement.textContent = '';
          inputField.classList.remove('invalid');
        }
        break;
      case 'password':
        if(inputField.value.length < 8) {
          errorElement.textContent = 'Password must be at least 8 characters';
          inputField.classList.add('invalid');
        } else {
          errorElement.textContent = '';
          inputField.classList.remove('invalid');
        }
        break;
      case 'email':
        // 邮箱验证逻辑示例
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if(!emailRegex.test(inputField.value)) {
          errorElement.textContent = 'Please enter a valid email';
          inputField.classList.add('invalid');
        } else {
          errorElement.textContent = '';
          inputField.classList.remove('invalid');
        }
        break;
      // 其他字段的验证规则依次添加在这里
    }
  });
});

关键细节说明 #

• 用row.querySelector替代全局的document.querySelector，确保错误提示和输入框一一对应，不会出现密码提示跑到姓名栏的情况。
• 遍历每个表单行后，每个字段的验证逻辑都是独立的，不会互相干扰。
• 如果需要做表单提交时的整体验证，同样要遍历所有表单行，逐个检查每个字段的状态，而不是只检查第一个行。

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