循环中的自动 onsubmit 处理程序

Question

我在使用 Javascript 时遇到以下问题。 我正在尝试自动（在页面加载后）向页面中的每个表单元素添加一个“onsubmit”处理程序。 所以我写了这个脚本：

window.onload=function(){
    var formElements=document.getElementsByTagName("form");
    for (var k=0;k<formElements.length;k++){
        formElements[k].onsubmit=function(param){
            return formValidator(param);
        }(formElements[k]);
    }
};

formValidator 函数将表单对象作为参数，验证表单内的 input 和 textarea 元素的内容，并返回 true 或 false 作为验证结果。 在页面的 HTML 文件中，我有一个没有 onsubmit 属性的表单元素（应该由 javascript 插入）。

问题在于，似乎在加载页面时表单会自动验证（即使用户没有提交表单）。然后，如果用户开始在表单中插入数据并单击提交按钮，则 validateForm 函数不会执行。

有什么想法吗？

谢谢。

Answer 1

您正在调用您的处理函数，并将调用它的结果分配给onsubmit。 （函数调用后的(formElements[k])。）

您需要引用函数而不调用它。在一般情况下做到这一点的一种好方法是使用构建器函数（但请参阅下文了解为什么该一般情况可能不适用于此处）：

window.onload=function(){
    var formElements=document.getElementsByTagName("form");
    for (var k=0;k<formElements.length;k++){
        formElements[k].onsubmit=buildHandler(formElements[k]);
    }

    function buildHandler(form) {
        return function(){
            return formValidator(form); // <== I'm guessing `formvalidator` takes the form
        };
    }
};

但没有必要为每个表单创建单独的处理程序。您分配处理程序的方式，this 将是 form 元素，所以只需：

window.onload=function(){
    var formElements=document.getElementsByTagName("form");
    for (var k=0;k<formElements.length;k++){
        formElements[k].onsubmit=handler;
    }

    function handler(){
        return formValidator(this);
    }
};

当您将函数分配给 DOM 元素上的 onxyz 属性时，当您使用 attachEvent（在 IE 上）或当您使用 addEventListener（标准）时，this 是元素的事情将是正确的。如果您从标记中的onxyz attributes 调用函数，则不是正确的，例如onsubmit="foo()"（虽然你可以使用onsubmit="foo.call(this);"，它会是）。