Knockout.js和敲除验证不能一起工作

Knockout.js and knockout-validations not working together

本文关键字：不能 一起 工作 验证 js Knockout      更新时间：2023-09-26

我一直在使用Knockout，现在尝试使用单独的验证库。我的ko版本是3.3.0，Knockout验证是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

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

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

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

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

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

然后

myViewModel.isValid() // false, as expected
相关文章：