如何封装jQuery自定义函数验证多组输入字段并返回布尔值

我完全理解你的痛点——重复的数组字段验证逻辑不仅让代码冗余，还会增加后续维护的成本。我们可以把这段重复的逻辑封装成一个通用的验证函数，不管你要验证多少组数组字段，都能轻松复用。下面是完整的优化方案：

优化后的完整代码 #

// 封装通用字段验证函数
function validateFields(inputElements) {
  const values = [];
  let isValid = true;
  
  inputElements.each(function() {
    const $input = $(this);
    const inputValue = $input.val().trim(); // 去除首尾空格，避免空值误判
    
    if (!inputValue) {
      $input.addClass('border1red');
      isValid = false;
      return false; // 跳出遍历，不再检查后续字段
    } else {
      $input.removeClass('border1red');
      values.push(inputValue);
    }
  });
  
  // 返回验证状态和收集到的有效值
  return { isValid, values };
}

// 点击事件绑定
$(document).on('click', '.subadd', function(){
  // 验证sid字段组
  const sidInputs = $('input[name="sid[]"]');
  const sidValidation = validateFields(sidInputs);
  
  // 验证title字段组
  const titleInputs = $('input[name="title[]"]');
  const titleValidation = validateFields(titleInputs);
  
  // 当两组字段都验证通过时执行添加操作
  if (sidValidation.isValid && titleValidation.isValid) {
    // 这里可以直接使用sidValidation.values和titleValidation.values获取有效值
    $('table#menutable tr:last').after("<tr>.....</tr>");
  }
});

代码解释 #

通用验证函数 validateFields #

• 参数：接收jQuery选择器选中的input元素集合（比如$('input[name="sid[]"]')）
• 功能：
  1. 遍历每个输入框，去除首尾空格后检查是否为空
  2. 为空则添加红色边框样式，并标记验证失败，终止遍历
  3. 不为空则移除红色边框样式，收集有效值
• 返回值：返回一个对象，包含两个属性：
  • isValid：布尔值，代表当前字段组是否所有字段都有有效值
  • values：数组，收集当前字段组的所有有效值

点击事件中的调用 #

• 分别获取两组字段的jQuery元素集合，调用验证函数得到结果
• 只有当两组字段的isValid都为true时，才执行添加表格行的操作

额外优化点 #

• 增加了trim()处理：避免用户输入的空格被误判为有效值，验证更严谨
• 职责单一：验证逻辑和业务逻辑分离，代码可读性和可维护性更强
• 扩展性强：如果后续需要验证其他字段组（比如desc[]），只需重复调用validateFields函数即可，无需重复编写遍历逻辑

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