Question

我正在使用Knockoutjs.com为＆＃34; Contacts Editor＆＃34;提供的示例。

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

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

如果任何字段（名称和电话需要）为空白，则不允许提交表单。
如果姓名没有任何电话号码（父母没有孩子），请不要提交表格。
如果没有姓名（完全空白的表格，没有父母），则不允许提交表格

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

contacts().length = 0

Answer 1

您可以在视图模型中引入其他标记，例如＆＃34;的isValid＆＃34;：

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>

and observable＆＃34; firstName＆＃34;和＆＃34; lastName＆＃34;字段：

self.contacts = ko.observableArray（ko.utils.arrayMap（contacts，function（contact）{ return {firstName：ko.observable（contact.firstName），lastName：ko.observable（contact.lastName），phones：ko.observableArray（contact.phones）}; }））;

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

任何额外的检查都可以添加到＆＃34; isValid＆＃34;计算机功能。

您可以查看更新的jsfiddle。

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

嵌套集合上的Knockout验证

1 个答案: