javascript - Chrome 与此 JS 崩溃

Question

Chrome 与此 JS 崩溃。有一个带有乘法输入的表格。JS 代码必须在提交之前检查它们是否填充。但是成功提交后 Chrome 崩溃了。

<script>
$(document).ready(function(){
    var form = $('form#add');
    form.submit(function(){
      var filledInputs = $('form#add input[value!=""]');
      $('form#add input[value=""]').css('border','solid 1px red');
      filledInputs.css('border','');
      if (filledInputs.length >= 9) {
          form.submit();
          return true;
      } else {
          return false;
      }
    });
});
</script>

Answer 1

当有>=9填充输入时，你的函数是无限递归的。在提交时，表单执行验证，如果验证通过，您再次调用提交，以验证表单，依此类推。

如果您删除form.submit();并返回true表单将正确提交。

Answer 2

您的表单已经提交，您无需再次提交：

if (filledInputs.length >= 9) {
    // form.submit();
    return true; // return true is to continue with the form submission
} else {
    return false;
}

Answer 3

稍微缩短代码会使问题变得明显：

form.submit(function(){
    form.submit();
})

这会导致无限递归，从而耗尽堆栈，并导致通常导致 chrome 中止脚本（或崩溃）。

Answer 4

你可以这样做：

form.submit(function () {
    var filledInputs = $('form#add input[value!=""]');
    $('form#add input[value=""]').css('border', 'solid 1px red');
    filledInputs.css('border', '');
    return (filledInputs.length >= 9);
});

表单将根据输入字段验证提交。