表单提交验证：如何用JQuery获取name为value[]的所有元素？

你遇到的问题很常见——jQuery的val()方法默认只会返回第一个匹配到的DOM元素的值，所以直接用$("[name='value[]']").val()只能拿到第一个输入框的内容。下面给你几种实用的解决方案：

方法1：用.each()遍历收集值 #

这是最直观的方式，遍历所有匹配的输入框，把每个值存到数组里：

// 初始化一个空数组用来存所有值
const valueArray = [];

// 遍历所有name为value[]的输入框
$("[name='value[]']").each(function() {
  // 把当前输入框的值push到数组里，this指向当前元素
  valueArray.push($(this).val());
});

// 现在valueArray里就有所有输入框的值了
console.log(valueArray); // 示例输出：["22.00", "11.00"]

方法2：用.map()+.get()简洁实现 #

如果喜欢更简洁的写法，可以用jQuery的.map()方法，最后用.get()把jQuery对象转成普通数组：

const valueArray = $("[name='value[]']")
  .map(function() {
    return $(this).val();
  })
  .get();

console.log(valueArray);

结合表单验证的场景（你需要的提交验证） #

既然你要在表单提交时验证这些值，顺便给你加个验证逻辑——检查每个值是否是合法的非负数值（对应input的min="0"）：

// 假设表单的submit事件处理函数
$('form').on('submit', function(event) {
  let isValid = true;
  const valueArray = [];

  $("[name='value[]']").each(function() {
    const inputVal = $(this).val();
    // 转成数值类型，方便判断
    const numVal = parseFloat(inputVal);

    // 验证：不是数字 或者 小于0
    if (isNaN(numVal) || numVal < 0) {
      isValid = false;
      // 可以给错误的输入框加样式提示
      $(this).addClass('border-danger');
    } else {
      $(this).removeClass('border-danger');
      valueArray.push(numVal);
    }
  });

  // 如果验证不通过，阻止表单提交
  if (!isValid) {
    event.preventDefault();
    alert('请确保所有输入框都是非负的有效数值');
  } else {
    // 验证通过，可以继续提交，或者用valueArray做其他处理
    console.log('所有值验证通过：', valueArray);
  }
});

小提示：因为input的type是number，val()返回的是字符串类型，如果需要做数值计算，记得用parseFloat()或者Number()转成数值哦～

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