如何高效判断querySelectorAll选中的所有表单input值非空？

先给你指出原代码里的问题：

• 第一行结尾用了冒号:，语法错误，要改成分号;
• inputs[0,1,2,3].value写法不对，逗号运算符只会返回最后一个值，实际只检查了第四个输入框，没覆盖所有输入项
• 没处理纯空格输入的情况，用户输一堆空格也应该判定为空

推荐两种高效的实现方式：

方式一：Array.from 转数组 + every 方法 #

const inputs = document.querySelectorAll('.input');
// 把NodeList转为数组，用every检查每个输入框去空格后的值不为空
const allInputsFilled = Array.from(inputs).every(input => input.value.trim() !== '');

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

方式二：扩展运算符转数组 + every 方法 #

const inputs = document.querySelectorAll('.input');
// 用扩展运算符把NodeList转为数组
const allInputsFilled = [...inputs].every(input => input.value.trim() !== '');

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

every方法会遍历所有元素，只有当每个输入框的值去掉首尾空格后都不为空时，才会返回true，刚好满足你“所有输入框均不为空”的需求。加trim()是为了过滤纯空格的无效输入，提升校验准确性。

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