使用 Knockout.Validation 验证 Observable 数组答案

【问题标题】：Validating Observable Array, using Knockout.Validation使用 Knockout.Validation 验证 Observable 数组
【发布时间】：2013-12-15 17:48:45
【问题描述】：

我们正在使用 Knockout、Durandal 和 Breeze 构建单页应用程序。

我们有一个可观察的数组，&想要验证它是否包含任何值，即接受值的文本框是否提供了任何值。我正在尝试使用 Knockout.Validation 插件来实现这一点。

视图模型的代码是-

withs = ko.observableArray([]).extend({ required: true }),

而 HTML 是

<div class="col-lg-9">
   <select multiple="true" 
        data-bind="options: entities, optionsValue: 'Id', optionsText: 'Name', 
                   selectedOptions: withs, select2: {}" 
        style="width: 249px; border-radius: 4px;"></select>
</div>

【问题讨论】：

标签： knockout.js knockout-validation

【解决方案1】：

您可以编写一个自定义验证器，例如：

ko.validation.rules['arrayMustContainAtLeastOne'] = {
    validator: function (val, required) {
        if (required) {
            if (val.length > 0) {
                return true;
            }
            return false;
        }
        return true;
    },
    message: 'Require at least one item in list'
}

会仔细检查文档以查看是否首先包含此内容

【讨论】：

我尝试使用您建议的上述代码，但它不适用于 select2 输入，它只是多选文本区域。即使用户输入为空或为空，也不会显示消息。

【解决方案2】：

这是另一种方法。

ko.validation.rules['minArrayLength'] = {
    validator: function (obj, params) {
        return obj.length >= params.minLength;
    },
    message: "Array does not meet minimum length requirements"
};

//Must call registerExtenders() or there will be no validation.
//It won't throw any errors either, it will just be ignored
ko.validation.registerExtenders();

//if you use this commented binding, the minLength will not come through correctly
//ko.observableArray([]).extend({ minArrayLength: { minLength: 1, message: 'Must select at least one item'} });
ko.observableArray([]).extend({ minArrayLength: { params: { minLength: 1 }, message: 'Must specify at least one unit per part number' } });

Thewad 的解决方案当然是有效的，但是如果您在自定义验证规则之后没有调用 registerExtenders()，它可以解释为什么验证不适合您。

【讨论】：

嗨@Tobin，如果将其更改为 ko.validation.rules.minArrayLength = { validator: function (obj, otherVal) { return obj.length >= otherVal.minLength; }, 消息：“数组不满足最小长度要求” };
我做了一个更正，虽然我不确定这是否正是你的意思。我发现最重要的部分是传递给验证器的参数必须用括号括起来，否则该值只是“真”，这对我来说很奇怪......我的代码为我工作的原因是因为布尔值“true”被解释为整数 1，恰好是我使用的 minLength 值。