如何在JavaScript函数中校验所有值满足条件？Vue表单提交校验问题

问题原因 #

• Array.every() 方法使用错误：该方法要求回调函数返回布尔值，用来判断数组内所有元素是否都满足指定条件，你当前的代码没有给every()的回调返回值，导致校验逻辑完全失效。
• 校验逻辑写反：你把成功逻辑放在了every()的遍历回调里，只要遍历到任意一个answer不为空的项就会打印success，和你要求的「所有项都不为空才校验通过」的需求完全相反。
• 没有统一的校验结果标记：就算遍历到answer为null的项触发了阻止默认行为，后续遍历依然会继续执行，还是会触发非空项的成功日志打印。

修正后代码 #

methods: {
  submitPressed(e){
    console.log(this.questions);
    // 两层遍历校验所有嵌套问题的answer都不为null
    const allAnswered = this.questions.every(question => {
      return question.questions.every(q => q.answer !== null)
    })

    if (allAnswered) {
      console.log('success');
      this.submit();
    } else {
      e.preventDefault();
      console.log('more to fill out');
      alert('请填写所有问题后再提交');
    }
  }
}

逻辑说明 #

• 先用两层every遍历所有嵌套的问题项，只有所有项的answer都不为null时，allAnswered才会返回true
• 统一拿到校验结果后再分支处理：校验通过才执行提交逻辑，校验失败就阻止表单提交+弹出提示

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