【问题标题】:Knockout Validation validatedObservable group error淘汰赛验证验证可观察组错误
【发布时间】:2012-11-02 02:53:47
【问题描述】:

我有一组项目需要作为一个整体进行验证。我在群里设置了validatedObservable,但是没有显示错误信息。

我在这里有一个简化的例子。我希望每个数字都在 0-100 之间,并且总和正好是 100。我该如何处理这种验证?

更新:我知道在这个例子中我可以创建一个ko.computed 并验证它,但这不是我需要的。

示例:http://jsfiddle.net/CGuW2/5/

0-100:<input data-bind="value: num1, valueUpdate: 'afterkeydown'"/><br>
0-100:<input data-bind="value: num2, valueUpdate: 'afterkeydown'"/><br>
<span class="validationMessage" data-bind='text: isValidSum.errors()'></span>

ko.validation.rules['mustEqual'] = {
    validator: function (val, otherVal) {
        return (parseInt(val.num1()) + parseInt(val.num2())) == otherVal;
    },
    message: 'total must equal {0}'
};
ko.validation.registerExtenders();

var viewModel = {
    num1: ko.observable("50").extend({ number: true, min: 0, max: 100 }),
    num2: ko.observable("50").extend({ number: true, min: 0, max: 100 })
};

viewModel.isValidSum = ko.validatedObservable({
                            num1: viewModel.num1,
                            num2: viewModel.num2
                        }).extend({ mustEqual: 100 });

ko.applyBindings(viewModel);

【问题讨论】:

  • 在 Chrome 中我可以看到“请输入小于或等于 100 的值”。如果我输入大数字...
  • 这些错误消息是针对每个号码的。我还需要验证组。每个数字必须在 0-100 之间,总和必须等于 100。我更新了示例,因为它有缺陷。

标签: knockout.js knockout-validation


【解决方案1】:

我需要绑定text: isValidSum.error 而不是text: isValidSum.errors()。此外,看起来您必须在执行此操作时绑定visible: !isValidSum.isValid()

所以我的解决方案是这样的:

示例:http://jsfiddle.net/CGuW2/6/

0-100:<input data-bind="value: num1, valueUpdate: 'afterkeydown'"/><br>
0-100:<input data-bind="value: num2, valueUpdate: 'afterkeydown'"/><br>
<span class="validationMessage" data-bind='visible: !isValidSum.isValid(), text: isValidSum.error'></span>

【讨论】:

  • 承认这似乎可行,但我认为这不是它的意图。 @ 987654322@ & 它的示例显示您应该将validatedObservable 调用的结果作为您的根VM 传递给applyBindings ...但我无法开始工作,请参阅@ 987654323@。你有什么进一步的顿悟吗?
  • 我顿悟了。自从我在这里发布我的答案(库版本)和我不再工作的解决方案以来,情况发生了变化。我发布了一个类似的问题here,我认为我对今天的图书馆有更好的答案(ko 3.4,kv 2.0.3)。
【解决方案2】:

检查这个小提琴,我已经实现了总和验证。
http://jsfiddle.net/CGuW2/3/
我认为问题在于你不能在validatedObservable上使用extend

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-09-19
    • 2014-09-28
    • 2017-12-01
    • 1970-01-01
    • 2013-10-24
    • 2016-10-12
    • 2017-09-14
    • 2012-02-18
    相关资源
    最近更新 更多