为何JS中inputs.every()在所有元素验证为true时仍返回false

我在多步骤表单里设置了email和password两个输入框，打算在进入下一步前用reportValidity()做验证。用inputs.some(input => {console.log(input.reportValidity())})的时候，两个输入框都返回true；但换成const allValid = inputs.every(input => {input.reportValidity()})时，allValid却得到false。

HTML代码 #

<div class="form-group">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" >
</div>
<div class="form-group">
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
</div>

JavaScript代码 #

const multiStepForm = document.querySelector("[data-multi-step]")
const formSteps = [...multiStepForm.querySelectorAll("[data-step]")]
const inputs = [...formSteps[currentStep].querySelectorAll("input")]

console.log("Each run starts here")
inputs.forEach(input => console.log(input.reportValidity()))
const allValid = inputs.every(input => {input.reportValidity()})
console.log(allValid)

控制台输出 #

Each run starts here.
true x 2 <- from reportValidity()
false <- from const AllValid

原因分析 #

问题核心在every的回调函数写法上：你用大括号{}包裹了逻辑，但没有显式返回reportValidity()的结果。input.reportValidity()本身会返回布尔值，但如果箭头函数用大括号却不写return，函数默认返回undefined——而undefined在布尔判断里等价于false，所以every会判定存在不满足条件的元素，最终返回false。

之前用forEach配合console.log时，console.log只是打印了reportValidity()的返回值，但forEach不关心回调的返回值，所以看起来验证都通过了，和every的逻辑不冲突。

解决方案 #

把every的回调改成以下两种写法之一即可：

写法1：去掉大括号，让箭头函数隐式返回 #

const allValid = inputs.every(input => input.reportValidity())

写法2：保留大括号，添加显式return #

const allValid = inputs.every(input => { 
    return input.reportValidity() 
})

修改后的完整代码示例：

const multiStepForm = document.querySelector("[data-multi-step]")
const formSteps = [...multiStepForm.querySelectorAll("[data-step]")]
const inputs = [...formSteps[currentStep].querySelectorAll("input")]

console.log("Each run starts here")
inputs.forEach(input => console.log(input.reportValidity()))
// 二选一即可
const allValid = inputs.every(input => input.reportValidity())
// const allValid = inputs.every(input => { return input.reportValidity() })
console.log(allValid)

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