Select all inputs.value

Question

我有4个输入框在表单中，并使用querySelectorAll来选中它们。我想检查所有输入框的值是否都不为空，如何以高效的方式实现这个功能呢？

你尝试的做法如下：

const inputs = document.querySelectorAll('.input');
if (inputs[0,1,2,3].value !== '') {
    alert('submit');
    form.reset();
}

Ani · Answer

你可以将节点列表转换为数组，然后使用.every()方法：

const allFilled = Array.from(document.querySelectorAll(".input"))
  .every(input => input.value !== "");

你的尝试：inputs[0,1,2,3].value 是无法生效的；JavaScript 并未提供这种隐含操作的功能。实际上，inputs[0,1,2,3] 等同于 inputs[3]，因为在 JavaScript 中，逗号被解析为“逗号运算符”，它是一个表达式分隔符。前面三个表达式虽然会被计算，但结果会被忽略；整个表达式的结果仅仅是数字 3。

jcalz · Answer

你的尝试 inputs[0,1,2,3] 并不是正确访问数组中每个元素的方法。你需要逐个访问数组中的索引来获取值。

解决方案：

const inputs = document.querySelectorAll('.input');

// 将 NodeList 转换为数组，因为 .some 方法适用于数组
const inputsArray = [...inputs];

// 检查数组中是否存在空输入框
const anyEmptyInput = inputsArray.some(input => input.value === '');

if (!anyEmptyInput) {
  alert('submit');
  form.reset();
}

在 HTML 部分：

你可以在实际代码中给这些 inputs 添加值，然后查看运行结果。

Roger Lipscombe · Answer

这是一个带有验证功能的标准表单示例。当输入元素具有 required 属性时，所有输入项都必须通过验证才能提交表单。在这个例子中：

city 输入框仅设置了 required 属性，只需包含任意非空字符串即可通过验证；
name 输入框要求至少包含4个字符；
address 输入框限制长度不超过20个字符；
zip 输入框要求其值为2至4位数字（这里还包含了一个 type="number" 的输入框，该输入框仅在值为数字时通过验证）。

document.forms.form01.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log('所有输入项均具有有效值...');
});

CSS样式确保表单按列布局展示，并且对齐方式设置为左对齐。

HTML部分：