Knockout.js 和淘汰赛验证不能一起工作答案

【问题标题】：Knockout.js and knockout-validations not working togetherKnockout.js 和淘汰赛验证不能一起工作
【发布时间】：2016-01-26 14:03:49
【问题描述】：

我一直在使用 Knockout，现在尝试使用单独的验证库。我的 ko 版本是 3.3.0，淘汰赛验证是 2.0.3，所以它们应该是最新的。我正在使用https://github.com/Knockout-Contrib/Knockout-Validation 中介绍的 Chrome 运行这个简单的示例：

var myViewModel = ko.validatedObservable({
  property1: ko.observable().extend({ required: true }),
  property2: ko.observable().extend({ max: 10 })
});

console.log(myViewModel.isValid()); //false

myViewModel().property1('something'); 
myViewModel().property2(9);

console.log(myViewModel.isValid()); //true

但是，当在 Chrome 中本地运行它时，这两个 isValid() 调用都为真，所以即使它是必需的并且它是空的，它也是有效的。但是，一些验证正在起作用：

var myViewModel = ko.validatedObservable({
  property: ko.observable().extend({ min: 10 })
});
myViewModel.isValid() // true, should be false though I guess?
myViewModel().property("test")
myViewModel.isValid() // false

那里可能有什么问题？这两个库都被大量使用并且是最新版本，所以我不明白为什么这些示例不起作用。

【问题讨论】：

标签： javascript knockout.js javascript-objects observable knockout-validation

【解决方案1】：

在这段代码 sn-p 中，您可以看到 Konockput 3.0（3.3.0 尚不存在）和 Ko.Validation 2.0.3 可以很好地协同工作：

ko.validation.init({
    messagesOnModified: false,
    insertMessages: true,
});


// View model 1

var myViewModel1 = ko.validatedObservable({
  property1: ko.observable('').extend({ required: true}),
  property2: ko.observable().extend({ max: 10 })
});

console.log('Should be false: ', myViewModel1.isValid());
$('#messages').append('Should be false: ' + myViewModel1.isValid() + '\n');

myViewModel1().property1('something'); 
myViewModel1().property2(9);

console.log('Should be true', myViewModel1.isValid());
$('#messages').append('Should be true: ' + myViewModel1.isValid() + '\n\n');

ko.applyBindings(myViewModel1, vm1);


// View model 2

var myViewModel2 = ko.validatedObservable({
  property: ko.observable().extend({ min: 10 })
});

myViewModel2().property(5);
console.log('Should be false', myViewModel2.isValid());
$('#messages').append('Should be false: ' + myViewModel2.isValid() + '\n');

myViewModel2().property(50);
console.log('Should be true', myViewModel2.isValid());
$('#messages').append('Should be true: ' + myViewModel2.isValid() + '\n\n');

ko.applyBindings(myViewModel2, vm2);

body, * {
    font-family: 'Segoe UI', Verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<h1>View Model 1</h1>
<div id="vm1" name="vm1">
    Property 1: <input type="text" data-bind="value: property1"/>
    <br/>
    Property 2: <input type="text" data-bind="value: property2"/>
    <br/>
</div>
<hr>
<div id="vm2" name="vm2">
  Property: <input type="text" data-bind="value: property"/>
</div>
<pre id="messages"></pre>

init 中指定的验证选项 'messagesOnModified: false' 表示在绑定模型时验证规则，而不是在第一次修改 observable 时验证规则。如果该选项为真，并且必填字段的原始值为空，则不会显示错误消息。

如果您没有为myViewModel2 上的属性指定值，isValid 将为真，但使用myViewModel2().property(5) 为其指定值使其为假。未验证空字段的最小值。

【讨论】：

【解决方案2】：

min 和 max 验证器忽略空字段。如果你喜欢

property: ko.observable(0).extend({ min: 10 })

然后

myViewModel.isValid() // false, as expected

【讨论】：