Question

我一直在使用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

那里有什么问题？这两个库的使用非常繁重，是最新版本，所以我不明白为什么示例不起作用。

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'表示在绑定模型时将验证规则，而不是在第一次修改observable时验证规则。如果该选项为true，并且必填字段的原始值为空，则不会显示错误消息。

如果您未在myViewModel2上为该属性指定值，则isValid将为true，但使用myViewModel2().property(5)为其指定值会使其为false。空字段未验证最小值。

Answer 2

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

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

然后

myViewModel.isValid() // false, as expected

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

2 个答案: