Question

我目前有一个验证脚本，其中包含存储在具有“id”，“type”，“isRequired”和“isValid”等属性的对象中的<input>个元素。我目前有这个setup()函数执行以下操作：

function setup(obj) {
    obj.getElement().onkeyup = function() {validate(obj)}
}

为了在我的所有输入对象上运行此setup()函数，我需要执行以下addEvents()函数

function setEvents() {
    setup(firstName)
    setup(lastName)
    setup(email)
    setup(dateOfBirth)
}

我正在帮助创建一个只有多个页面形式的系统，所以如果我不必为每个对象输入这个，我更喜欢这样。 有没有办法可以收集基于特定对象模板的所有对象的数组？这样我就可以遍历数组并在单个函数中对每个对象应用设置。如果没有，有其他选择吗？

（p.s。我最近一直在问这么多面向对象的（哦，我有时会自我解决）问题，因为这是我第一次搞乱对象）

--- ---编辑

我所指的对象模板看起来像这样：

function input(id,isRequired,type) {
    this.id = id
    this.isRequired = isRequired
    this.type = type
}

然后是

firstName = new input('firstName',true,'alpha')

Answer 1

与大多数javascript问题一样，最简单的方法是使用jQuery等库。如果你有一种独特的方法来区分这些对象与css选择器（例如，他们都有类“验证”或他们是页面上的唯一输入[type =“text”]字段或东西），那么你可以做一个像$('.validate')这样的简单选择来获取所有这些对象的数组。你可以使用javascript获得这个数组，但它有点复杂。一旦你有了数组，你可以循环遍历元素，或者你可以做一个像$('.validate').change(validate);这样的简单绑定，只要一个带有'validate'类的dom元素发生变化就会调用validate（）方法。

编辑：所以显然我不知道你想要完成的全部内容，但如果你是网络编程的新手，也要注意无论你在客户端做什么（即在浏览器中），所有验证也应该在服务器端完成。 Javascript验证通常只是用户友好而不是实际验证您的输入，因为我可以轻松关闭javascript或重新定义验证为function validate() {}并绕过javascript验证无论出于何种原因。

第二编辑：所以我不确定这个答案是100％你想要的，但不管怎么说都很好。

Answer 2

根据您的示例判断您没有使用jQuery。仅仅因为这个原因，我要投票给你。同样，在您对JS非常熟悉以及如何做事之后，请考虑使用框架或保存脚本，这样您就不必为每个项目重新发明轮子。

您实际上可以使用DOM！

页面中的所有表单都可以使用document.forms[index]引用。或者，您也可以使用document.formName引用命名表单。

请查看此jsfiddle以获取使用后者的示例。

<强>更新

阅读您的更新以及您需要一种创建输入对象并设置验证的方式。我用不同的方法更新了我的小提琴。

使用id来保存关于元素的验证信息，然后addValidation函数将id恢复为它的基本形式，这样你仍然可以在整个应用程序中正常使用它。

唯一的要求是在页面加载后首先添加验证。所以ID首先得到了改进。

解决方案也是JS安全的，这意味着如果用户没有JS，除了没有验证之外，不会发生任何其他事情。

Answer 3

正如我在评论中所说，你可以在创建数组时将元素添加到数组中：

var inputs = [];
var firstName = new input('firstName',true,'alpha');
inputs.push(firstName);

这还不方便。但是你可以创建另一个管理所有这些的对象：

var InputManager = {
    elements: [],
    create: function(/* arguments here */) {
        var n = new input(/* arguments here */);
        this.elements.push(n);
        return n;
    },
    setup: function() {
        for(var i = this.elements.length; i--;) {
            (function(obj) {
                obj.getElement().onkeyup = function() {validate(obj)};
            }(this.elements[i]));
        }
    }
};

你可以做到：

var firstName = InputManager.create('firstName',true,'alpha');
// etc.
InputManager.setup();

这些方面的东西。我认为这将是一种非常面向对象的方式。如果你有一个对象集合，你经常有另一个对象来处理应该对所有这些对象执行的函数。

Answer 4

我认为你的问题是onkeyup范围内的obj是未定义的。

function setup(obj) {
    //obj is desired
    obj.getElement().onkeyup = function() {validate(obj) //obj is undefined because onkeyup is the new scope of this function
}

相反，你可以这样做：

function setup(obj) {
    obj.getElement().onkeyup = function() {validate(this) 
}

拉动一系列物体

4 个答案: