JavaScript表单验证return false未终止执行原因排查

核心问题 #

你在Array.prototype.filter的回调函数里写的return false，只会影响filter方法的结果（决定当前元素是否被保留到过滤后的数组），并不会终止外层的submit事件处理函数。所以不管验证是否失败，filter执行完后，后面的AJAX代码都会继续执行。

为什么会这样？ #

filter是数组方法，它的回调函数里的返回值只和数组元素的过滤逻辑有关——返回true保留元素，返回false排除元素。这个return完全不会影响外层的submit回调函数的执行流程，外层函数会继续往下走，自然就触发了AJAX请求。

另外，你这里其实没必要用getElementsByName加filter来处理表单：因为submit事件是绑定在#frmInfo这个表单上的，event.target直接就是当前表单元素，不需要遍历数组。

修复方案 #

直接在submit回调里做验证，一旦验证失败就直接return终止整个函数，跳过后续的AJAX逻辑：

修改后的关键代码部分：

$("#frmInfo").submit(function (event) {
    event.preventDefault();
    // 直接获取当前触发submit的表单
    const form = event.target;

    // 检查表单有效性
    if (!form.checkValidity()) {
        form.classList.add('was-validated');
        alert('Hit invalid user input');
        return; // 这里return才会终止整个submit回调，跳过后续代码
    }

    // 验证通过才执行以下逻辑
    form.classList.add('was-validated');
    alert('Everything is valid');

    // 后续的数据处理、AJAX请求代码...
    var obj = Object.fromEntries(new FormData(form));
    if (obj.Is_Body_HTML == 1)
        obj.Is_Body_HTML = true;
    else
        obj.Is_Body_HTML = false;
    if (obj.Is_Active == 1)
        obj.Is_Active = true;
    else
        obj.Is_Active = false;

    setDisabled();
    var json = JSON.stringify(obj);
    alert(json);
    var request = $.ajax({
        url: "../handlers/test.ashx",
        method: "POST",
        data: json,
        dataType: "json"
    });
    // ...（剩下的AJAX回调代码保持不变）
});

额外优化点 #

• 用const/let替代var，避免变量提升问题
• 布尔值转换可以简化：obj.Is_Body_HTML = obj.Is_Body_HTML === '1'，同理obj.Is_Active = obj.Is_Active === '1'

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