如何将名称连续但不同的元素存入数组？（jQuery/JavaScript）

没问题，我来帮你搞定这个动态联系人的表单验证问题！针对这种可批量添加的表单，关键是要做好动态元素的事件绑定和批量验证逻辑，下面我一步步给你拆解方案：

一、先搭好统一的HTML结构 #

首先要给每个联系人项套一个统一的容器，方便后续遍历和操作，同时用数组式的命名让后端能直接接收联系人列表：

<form id="contact-form">
  <!-- 默认两个联系人组 -->
  <div class="contact-group">
    <h4>联系人 1</h4>
    <input type="text" name="contact[][name]" placeholder="姓名" class="required">
    <input type="tel" name="contact[][phone]" placeholder="电话" class="required">
    <button type="button" class="remove-contact">删除</button>
  </div>
  <div class="contact-group">
    <h4>联系人 2</h4>
    <input type="text" name="contact[][name]" placeholder="姓名" class="required">
    <input type="tel" name="contact[][phone]" placeholder="电话" class="required">
    <button type="button" class="remove-contact">删除</button>
  </div>

  <!-- 添加/提交按钮 -->
  <button type="button" id="add-contact">添加新联系人</button>
  <button type="submit">发送</button>
</form>

二、实现动态添加/删除联系人 #

这里要注意事件委托的使用，因为动态生成的元素没有初始事件绑定，必须借助父元素来触发：

$(document).ready(function() {
  // 点击添加新联系人
  $('#add-contact').click(function() {
    const groupCount = $('.contact-group').length + 1;
    // 复制第一个联系人组作为模板
    const newGroup = $('.contact-group:first').clone();
    // 更新序号并清空输入框
    newGroup.find('h4').text(`联系人 ${groupCount}`);
    newGroup.find('input').val('');
    // 插入到添加按钮前
    newGroup.insertBefore('#add-contact');
  });

  // 删除联系人（事件委托处理动态元素）
  $('#contact-form').on('click', '.remove-contact', function() {
    // 至少保留1个联系人（可根据需求调整）
    if ($('.contact-group').length > 1) {
      $(this).closest('.contact-group').remove();
      // 重新更新所有联系人的序号（可选优化）
      $('.contact-group').each(function(index) {
        $(this).find('h4').text(`联系人 ${index + 1}`);
      });
    }
  });
});

三、核心：批量验证逻辑 #

分两种场景做验证，兼顾用户体验和提交准确性：

1. 实时验证（输入时提示错误） #

给所有必填项绑定失焦验证，动态元素同样用事件委托：

// 单个输入框验证函数
function validateField($field) {
  // 清除之前的错误状态
  $field.removeClass('error').next('.error-message').remove();
  
  // 必填项非空验证
  if (!$field.val().trim()) {
    $field.addClass('error');
    $field.after('<span class="error-message">此项为必填</span>');
    return false;
  }
  
  // 手机号格式验证（可根据需求扩展规则）
  if ($field.attr('type') === 'tel') {
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test($field.val().trim())) {
      $field.addClass('error');
      $field.after('<span class="error-message">请输入有效的手机号</span>');
      return false;
    }
  }
  return true;
}

// 实时验证（事件委托）
$('#contact-form').on('blur', '.required', function() {
  validateField($(this));
});

2. 提交时批量验证所有联系人 #

表单提交时遍历所有联系人组，确保没有遗漏：

// 表单提交总验证
$('#contact-form').submit(function(e) {
  let isValid = true;
  
  // 遍历所有联系人组，逐个验证必填项
  $('.contact-group').each(function() {
    $(this).find('.required').each(function() {
      if (!validateField($(this))) {
        isValid = false;
      }
    });
  });
  
  // 有错误则阻止提交
  if (!isValid) {
    e.preventDefault();
    alert('请完善所有必填信息后再提交');
  }
});

四、美化错误提示（可选） #

加一点CSS让错误状态更直观：

.error {
  border: 1px solid #ff4444;
}
.error-message {
  color: #ff4444;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}
.contact-group {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
}

额外提示 #

如果要处理上百个联系人的极端情况，可以做这些优化：

• 实时验证只针对当前操作的输入框，避免批量触发
• 提交验证时可以加入防抖，防止重复提交
• 可以给验证通过的组加个“已完成”标识，提升用户体验

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