Knockout.js 和敲除验证无法协同工作

Question

我一直在使用 Knockout，现在尝试使用单独的验证库。我的 ko-version 是 3.3.0，knockout-validation 是 2.0.3，所以它们应该是最新的。我是运行这个带有 Chrome 的简单示例 https://github.com/Knockout-Contrib/Knockout-Validation:

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() 调用提供了 true，所以即使它是必需的并且它是空的，它也是有效的。然而，一些验证工作正常：

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

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

Answer 1

在此代码片段中，您可以看到 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' 意味着规则将在绑定模型时进行验证，而不是在首次修改可观察对象时进行验证。如果该选项为真，并且必填字段的原始值为空，则不会显示错误消息。

如果您没有在 myViewModel2 上为属性指定值，则 isValid 将为真，但使用 myViewModel2().property(5) 为其指定值会使它是假的。空字段不适用于最小值。

Answer 2

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

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

然后

myViewModel.isValid() // false, as expected

Knockout.js 和敲除验证无法协同工作

Knockout.js and knockout-validations not working together

javascript

knockout.js

javascript-objects

observable

knockout-validation