Question

我写了以下使用knockout的例子。

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相同？

Answer 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

Answer 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不可观察，因此不会在上面的示例中触发更新。

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

2 个答案: