如何使用 Knockout-Validation 验证特定的子项

Question

我正在使用 Knockout-Validation 的 sample 并添加了 2 个包含验证规则的子集合。

var Item = function(id, name) {
  var self = this;
  self.id = ko.observable(id).extend({required: {message: 'item id required'}});
  self.name = ko.observable(name).extend(
  {
    minLength: {message :'item name must be at least 5 characters', params: 5}, 
    maxLength: 10
  });
   
   ko.validation.group(self, { live: true }); 
};

var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];

var viewModel = {
    items : ko.observableArray(itemsList),
    items2: ko.observableArray(itemsList),
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}),
    lastName: ko.observable().extend({required: true}),
    emailAddress: ko.observable().extend({
        // custom message
        required: {
            message: 'Please supply your email address.'
        }
    }),
    age: ko.observable().extend({min: 1, max: 100}),
    location: ko.observable()
};

正在使用

ko.validation.group(viewmodel, { deep: true });

我的子集合正确显示验证消息，但我只希望验证 1 个子集合。 documentation 表示要传递我想要验证的项目，例如：

ko.validation.group([viewModel.firstName, viewModel.lastName, viewModel.items]);

但是当我这样做时，子集合不再显示验证消息。

要复制，请转到我上面链接的示例并单击提交。两个组中的项目 0 和项目 2 都会有验证消息。变化

viewModel.errors = ko.validation.group(viewModel, {deep: true});

至

viewModel.errors = ko.validation.group([viewModel.lastName, viewModel.items]);

运行并点击提交。

Answer 1

创建 ViewModel 时：

 var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];
 
 var viewModel = {
     items : ko.observableArray(itemsList),
     items2: ko.observableArray(itemsList),

您在两个可观察数组中共享相同的可观察值，即 items 和 items2。

你可以通过添加新的 observables 来解决它（我添加 itemsList2 然后我用它来初始化 items2）：

 var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];
 var itemsList2 = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')]; <---
 
 var viewModel = {
     items : ko.observableArray(itemsList),
     items2: ko.observableArray(itemsList2), <---
     ...
 };

最后需要在这句话中加上{deep: true}：

viewModel.errors = ko.validation.group([viewModel.lastName, viewModel.items], {deep: true});

这里以fiddle为例，还有完整的ViewModel。

var Item = function(id, name) {
  var self = this;
  self.id = ko.observable(id).extend({required: {message: 'item id required'}});
  self.name = ko.observable(name).extend(
  {
    minLength: {message :'item name must be at least 5 characters', params: 5}, 
    maxLength: 10
  });
   
   ko.validation.group(self, { live: true }); 
};

var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];
var itemsList2 = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];

var viewModel = {
    items : ko.observableArray(itemsList),
    items2: ko.observableArray(itemsList2),
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}),
    lastName: ko.observable().extend({required: true}),
    emailAddress: ko.observable().extend({
        // custom message
        required: {
            message: 'Please supply your email address.'
        }
    }),
    age: ko.observable().extend({min: 1, max: 100}),
    location: ko.observable()
};

如何使用 Knockout-Validation 验证特定的子项

How to validate specific child items using Knockout-Validation

javascript

knockout.js

knockout-validation