在Blur上验证

Question

我创建了一个JSFiddle来帮助演示我的问题:http://jsfiddle.net/jeffreyrswenson/CrYWn/5/

这是我想看到的:

• 页面加载时不应出现消息.
• 按下提交按钮时应显示消息.
• 更改输入值并且用户离开元素后,应显示消息.(标签或点击下一个字段)
• 消息应在用户离开输入后显示而不更改.(例如,需要一个字段,用户在字段中选项,但不输入值.我希望在发生这种情况时显示验证消息.)

前四个工作正如我所料.最后一项是否可能,如果是,我需要更改哪些才能启用该行为？

HTML:

<label>First name:
<input data-bind='value: firstName' />
</label>
<br/>
<label>Last name:
    <input data-bind='value: lastName' />
</label>
<br/>
<button type="button" data-bind='click: submit'>Submit</button>
<br/>
<span data-bind='text: errors().length'></span> errors

视图模型:

var viewModel = function () {
       ko.validation.configure({
           decorateElement: true,
           registerExtenders: true,
           messagesOnModified: true,
           insertMessages: true,
           parseInputAttributes: true,
           messageTemplate: null
       });

       this.firstName = ko.observable().extend({
           required: true
       });
       this.lastName = ko.observable().extend({
           required: true,
           pattern: {
               message: 'Hey this doesnt match my pattern',
               params: '^[A-Z0-9]+$'
           }
       });

       this.submit = function () {
           if (this.errors().length == 0) {
               alert('Thank you.');
           } else {
               this.errors.showAllMessages();
           }
       };
       this.errors = ko.validation.group(this);
   };

Answer 1

您只需使用绑定的标准valueUpdate选项,您可以在其中指定其他事件以触发属性更改并进行验证.value

所以你只需要valueUpdate: "blur"在绑定上添加设置:

<label>First name:
    <input data-bind='value: firstName, valueUpdate: "blur"' />
</label>
<br/>
<label>Last name:
    <input data-bind='value: lastName, valueUpdate: "blur"' />
</label>

演示JSFiddle.