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函数将表单对象作为参数，验证表单内输入和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元素上为this属性赋值时，当你使用onxyz（在IE上）或者当你使用{时，attachEvent作为元素的事情都是正确的{1}}（标准）。如果您在标记中调用addEventListener 属性中的函数，则不为真，例如onxyz（虽然你可以使用onsubmit="foo()"，但它会是。）

循环中的自动onsubmit处理程序

1 个答案: