嵌套集合的敲除验证

Question

我正在使用 Knockoutjs.com 为 "Contacts Editor" 提供的示例。

我在我的网站上使用完全相同的代码，现在需要验证提交时是否缺少信息。

以下是我想在表单上实施的验证规则：

如果任何字段（姓名和 Phone 必填）为空，则不允许提交表单。
如果姓名没有任何 Phone 号码（parent 没有 children），则不允许提交表格。
如果没有姓名则不允许提交表格（没有 parent 的完全空白表格）

我唯一能弄清楚如何分析的是缺少的名字：

contacts().length = 0

Answer 1

您可以在视图模型中引入额外的标志，例如"isValid":

self.isValid = ko.computed(function() {
    if(self.contacts().length === 0) {
    return false;
  }
  var allContactsHaveNames = self.contacts().filter(function(contact) {
    return contact.firstName() !== "" && contact.lastName() !== "";
  }).length === self.contacts().length;
  return allContactsHaveNames;
});

并在其中进行所有检查。

当然，这需要更改标记：

<button data-bind='click: save, enable: isValid'>Save to JSON</button>

和可观察的"firstName"和"lastName"字段：

self.contacts = ko.observableArray(ko.utils.arrayMap(联系人, 函数(联系人) { return { 名字：ko.observable(contact.firstName)，姓氏：ko.observable(contact.lastName)，电话：ko.observableArray(contact.phones) }; }));

self.addContact = function() {
    self.contacts.push({
        firstName: ko.observable(""),
        lastName: ko.observable(""),
        phones: ko.observableArray()
    });
};

任何额外的检查都可以添加到 "isValid" 计算函数中。

您可以检查更新 jsfiddle。

P.S。您可以使用 Knockout 验证，正如评论中建议的@Sam.C。

嵌套集合的敲除验证

Knockout validation on a nested collection

knockout-mapping-plugin

knockout.js