KnockoutJS 动态表单验证

Question

我有一个具有三个字段组的表单，单击“添加新”按钮将添加其他三个字段组。这部分工作得很好。

我想添加验证，因此需要所有三个字段才能添加新组。

这里的代码可以参考：http://jsfiddle.net/5g8Xc/

var ContactsModel = function(contacts) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
        return { firstName: contact.firstName, fathersLast: contact.fathersLast, country: contact.country };
    }));

    self.addContact = function() {
        self.contacts.push({
            firstName: "",
            fathersLast: "",
            country: ""
        });
    };

    self.removeContact = function(contact) {
        self.contacts.remove(contact);
    };
};

关于如何实施此验证的任何线索？我试图使用 jquery 验证来做到这一点，但我认为使用 KnockoutJS 是可能的。

感谢任何建议。

Answer 1

如前所述，the validation plugin 将是最优雅、更少重新发明的解决方案。

编辑：在评论implementation使用验证插件之后

除此之外，您还有几个选择。

• 如果您确信联系人对象将始终只包含必填字段，则将迭代联系人的属性不是非常健壮的实现，以确保每个属性都有一些价值。

• 更健壮一些，但仍然缺乏插件的优雅，实现将是维护一个必填字段数组并使用该数组进行验证。您可以参考my example 进行此设置。本质上，每个必需的属性都映射到可观察对象。对任何可观察属性值的更改都会触发（通过subscription）对computed 中使用的虚拟可观察对象的突变调用。这是必需的，因为计算不能调用valueHasMutated。突变调用触发计算重新评估，从而更新 UI。