javascript - 循环中的自动提交处理程序

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(标准)时。如果您从标记中的 onxyz attributes 调用函数，则不为真，例如onsubmit="foo()"(尽管您可以使用 onsubmit="foo.call(this);"，它会成功)。