验证模糊

Jeff 发表于 Dev

杰夫

我创建了一个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

ViewModel：

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);
   };

nemesv

您只需要使用绑定的标准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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。