2

我对 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 函数不会执行。

有任何想法吗？

谢谢你。

4

1 回答 1

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 元素上的属性时，当您使用（在 IE 上）或当您使用（标准）时，作为元素的事情this将是真实的。如果您从标记中的属性调用函数，则不是这样，例如（尽管您可以使用并且它将是）。onxyzattachEventaddEventListeneronxyz onsubmit="foo()"onsubmit="foo.call(this);"

于 2013-07-14T13:57:17.150 回答