observableArray 上的 knockout.js 验证要求所有项目（无空字段）答案

【问题标题】：knockout.js validation on observableArray to require all items (no empty fields)observableArray 上的 knockout.js 验证要求所有项目（无空字段）
【发布时间】：2018-04-30 23:26:23
【问题描述】：

我已经写了以下使用敲除的例子。

HTML

<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>First name: <input data-bind='value: firstName'/></label>
    <label>Last name: <input data-bind='value: lastName'/></label>    

    <table>
    <thead>
        <tr><th>Value</th></tr>
    </thead>
    <tbody data-bind="foreach: captcha">
        <tr>
            <td><input data-bind="value: value" type="test" /></td>
        </tr>
    </tbody>
</table>

<button type="button" data-bind='click: submit'>Submit</button>

淘汰赛

ko.validation.rules.pattern.message = 'Invalid.';


ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});


var captcha = function (val) {
    return val == 11;
};

var mustEqual = function (val, other) {
    return val == other();
};

var viewModel = {
    firstName: ko.observable().extend({ required: true }),
    lastName: ko.observable().extend({ required: true }),
    captcha: ko.observableArray([{value: "test"}]),


    submit: function () {
        if (viewModel.errors().length == 0) {
            alert('Thank you.');
        } else {
            alert('Please check your submission.');
            viewModel.errors.showAllMessages();
        }
    }
};


viewModel.errors = ko.validation.group(viewModel);

ko.applyBindings(viewModel);

我应该在 observableArray 中添加什么以要求此数组中的所有项目与通常的可观察对象在所展示的示例中输入字段 FirstName 和 LastName 的方式相同？

【问题讨论】：

要求此数组中的所有项目是什么意思？
@adiga 我不想留下空白字段。
向value 添加所需的验证，类似于firstName?
@adiga 抱歉误会，像 firstName 这样的可观察对象具有必需的属性并且验证有效，那么 observableArray 我应该为这个数组添加一些内容以检查其中的每个项目（如果不为空）。

标签： knockout.js knockout-2.0 knockout-validation

【解决方案1】：

我不确定这是否是您所期望的。如果您想为observableArray 的每个对象添加验证，您可以执行以下操作：

创建一个captchaViewModel 函数并将required 验证添加到value 属性

var captchaViewModel = function(val) {
  this.value = ko.observable(val).extend({
    required: true
  });
 // other properties if any
}

然后将您的viewModel 更改为：

var viewModel = {
  firstName: ko.observable().extend({ required: true }),
  lastName: ko.observable().extend({ required: true }),
  captcha: ko.observableArray([new captchaViewModel("test")]),

  submit: function() {
    if (viewModel.errors().length == 0) {
      alert('Thank you.');
    } else {
      alert('Please check your submission.');
      viewModel.errors.showAllMessages();
    }
  }
};

您还需要将grouping 属性添加到configuration 并设置deep: true。

ko.validation.configure({
   .......
   .......
  // "deep" indicates whether to walk the ViewModel (or object) recursively, 
  // or only walk first-level properties
  grouping: { deep: true }
});

Here's a fiddle for testing

【讨论】：

【解决方案2】：

您可以像这样添加您的custom validation rule：

ko.validation.rules['noEmptyValues'] = {
    validator: function (arr) {
        return arr.every(function(v) {
          return v && v.value; // TODO: confirm this is the test condition
        });
    },
    message: "Array contains empty items"
};

// Some place else:
var arrayThatCannotContainEmptyValues = ko.observableArray([])
  .extend({ noEmptyValues: true });

目前还不清楚// TODO 行的测试应该是什么，但我相信你可以弄清楚。

请注意，这仅在您修改实际数组时有效。由于value 是不可观察的，因此不会触发上例中的更新。

【讨论】：