Knockout.js 淘汰验证值更新取决于属性错误

根据属性是否附加了错误，是否可以将属性值更新从“onblur”更改为“keyup”

我想模仿jQuery验证中的验证方式，首先对blur进行验证，然后对keyup进行验证

这可能吗

编辑： 让我澄清一下并举个例子。我不介意绑定到模型发生在“keyup”上，我介意的是，在用户有机会完成键入之前，会向用户显示一条错误消息。相反，如果我以验证电子邮件地址为例。如果用户键入无效电子邮件，我希望错误显示为模糊，如果用户再次将焦点放在字段上以更正错误，我希望错误更正后消失。另一方面，如果用户首先键入有效的电子邮件，然后引入错误，则错误应立即显示

第二次编辑： 所以我对它进行了一些思考，我认为验证不应该干扰模型绑定，相反，应该对错误消息的显示进行更改。如上所述，我希望错误发生后立即出现，但仅在相关字段发生更改事件后出现

我做了这把小提琴，它几乎可以用了，但它应该准确地显示出我正在努力实现的目标

名字很脏！
X
ko.extenders.trackChange=功能（目标，轨道）{
如果（轨道）{
target.isD=ko.可观察（假）；
target.enableD=函数（）{
log（“enable！”）；
target.isD（正确）；
}
}
回报目标；
};
var ViewModel=函数（）{
var self=这个；
self.firstName=ko.observable（）.extend（{trackChange:true，必需：{message:“firstName”}，编号：true，
分:0,，
最高：100
});
self.lastName=ko.observable（）.extend（{required:{message:“lastName”}}）；
}
var viewModel=新的viewModel（）；
应用绑定（视图模型）；

---

具体来说，错误出现在页面加载上显示的第一条验证消息中。

要正确执行，您需要重写

valueUpdate

绑定，以便它接受一个可观察值，并且您的可观察值将基于该值是否有错误

这听起来很难，所以我选择了一个更简单的方法。我将

事件

绑定替换为

值更新

。它在keydown时触发，如果已验证的变量无效，则从输入中更新其值（使用

event.target

）。该值将始终在模糊时更新，因此我不必处理它

var viewModel={
num1:ko.可观测（50）.延伸({
数字：对，
分:0,，
最高：100
}),
maybeeevaluate：函数（数据、事件）{
setTimeout（函数（）{
如果（！viewModel.num1.isValid（））{
num1（event.target.value）；
}
}, 0);
返回true；
}
};
应用绑定（视图模型）
.validationMessage{
颜色：红色；
}

0-100:


要正确地执行此操作，您需要重写
值更新
绑定，以便它接受一个可观察值，并且您的可观察值将基于该值是否有错误

这听起来很难，所以我选择了一个更简单的方法。我将
事件
绑定替换为
值更新
。它在keydown时触发，如果已验证的变量无效，则从输入中更新其值（使用
event.target
）。该值将始终在模糊时更新，因此我不必处理它


var viewModel={
num1:ko.可观测（50）.延伸({
数字：对，
分:0,，
最高：100
}),
maybeeevaluate：函数（数据、事件）{
setTimeout（函数（）{
如果（！viewModel.num1.isValid（））{
num1（event.target.value）；
}
}, 0);
返回true；
}
};
应用绑定（视图模型）
.validationMessage{
颜色：红色；
}

0-100:


谢谢你的回答，第一个答案并不完全模仿jQuery验证，我担心我对想要的行为的解释不准确。我试图实现的是“如果用户键入无效电子邮件，我希望错误显示在模糊上，如果用户再次将焦点放在字段上以更正错误，我希望错误在更正错误后消失。如果用户再次引入错误，它将立即显示”。我尝试了玩（）灵感来自，但我相信我想要的行为并没有真正得到淘汰验证的支持，至少据我所知不是这样。也许我将不得不修补验证插件，因此我能够提供一个函数来确定是否应该显示错误消息。你的想法很受欢迎-看来你对击倒很有经验。@darkdark我还更新了你的小提琴。您可以看到，我现在跟踪并测试该项是否有错误。抱歉耽搁了。我已经尝试了一段时间了。我接受这个答案是因为你的第二个解决方案完全符合我的描述-谢谢！感谢您给出的好答案，第一个答案并不完全模仿jQuery验证，我担心我对所需行为的解释不准确。我试图实现的是“如果用户键入无效电子邮件，我希望错误显示在模糊上，如果用户再次将焦点放在字段上以更正错误，我希望错误在更正错误后消失。如果用户再次引入错误，它将立即显示”。我尝试了玩（）灵感来自，但我相信我想要的行为并没有真正得到淘汰验证的支持，至少据我所知不是这样。也许我将不得不修补验证插件，因此我能够提供一个函数来确定是否有错误
<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">    
    <input data-bind="value: firstName, valueUpdate: 'keyup', event: {change: firstName.enableD}" />
    <br />
    <input data-bind="value: lastName" />

    <div data-bind="if: firstName.isD">
        Firstname is dirty!
    </div>

    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
    <div data-bind="text: ko.toJSON($data)"></div>
</div>
<script type="text/html" id="myCustomTemplate">
    <span data-bind="visible: field.isD && !field.isValid(), attr: { title: field.error }">X</span>
</script>

ko.extenders.trackChange = function(target, track) {
  if (track) {
    target.isD = ko.observable(false);
    target.enableD = function() {
        console.log("enable!");
      target.isD(true);
    }
  }
  return target;
};

var ViewModel = function () {
    var self = this;
    self.firstName = ko.observable().extend({ trackChange: true, required: { message: "firstName" }, number: true,
    min: 0,
    max: 100
    });
    self.lastName = ko.observable().extend({ required: { message: "lastName" }});  
}

var viewModel = new ViewModel();

ko.applyBindings(viewModel);