Knockoutjs 立即验证

Question

我使用 AMD 创建了一个 knockoutjs 应用程序。目前我有点坚持验证。这是 ViewModel 代码：

define(['knockout', 'hasher', 'text!./login-window.html'],
    function (ko, hasher, templateMarkup) {
    'use strict';

    function LoginWindowViewModel(params) {
        //observables
        this.properties = ko.validatedObservable({
            username: ko.observable().extend({
                required: { message: 'Please supply your user name' }
            }),
            password: ko.observable().extend({
                required: { message: 'Please supply your password' }
            })
        });
    }

    return { viewModel: LoginWindowViewModel, template: templateMarkup };

});

<div data-bind="css: { 'form-group': true, 'has-error': !properties().username.isValid() }">
    <label for="input-username" class="col-lg-3 control-label">Username</label>
    <div class="col-lg-9">
        <input type="text" name="input-username" class="form-control" data-bind="value: properties().username" />
    </div>
</div>
<div data-bind="css: { 'form-group': true, 'has-error': !properties().password.isValid() }">
    <label for="input-password" class="col-lg-3 control-label">Password</label>
    <div class="col-lg-9">
        <input type="text" name="input-password" class="form-control" data-bind="value: properties().password" />
    </div>
</div>

问题是页面加载敲除将has-errors 类添加到“包装器div”（具有form-group 类的那些）。用户在绑定输入中输入内容后如何打开验证？

在你指向我之前：Knockout Validation evaluates immediately on load - 我没有遇到验证消息显示的问题，但是添加了 div 的类是它当时不应该有的。

Answer 1

在绑定上试试这个：

css: { 'form-group': true, 'has-error': !properties().username.isValid() && properties().username.isModified() }

基本上，我们正在检查 observable 是否已被修改以显示错误。 isModified 是一个被 ko 验证自动插入的 observable。

如果您的视图模型中的某些内容实际上将 observable 设置为空或 null，（例如一些初始化代码）您需要：

properties().username.isModified(false)

我还没有测试它，所以它可能需要一些调整

Answer 2

我想出了一个临时解决方案，但我不喜欢它，所以任何有更好想法的人 - 请站出来 :)。

this.shouldValidateUsername = ko.pureComputed(function () {
    return !this.properties().username.isValid() && this.validationIsOn();
}, this);
this.shouldValidatePassword = ko.pureComputed(function () {
    return !this.properties().password.isValid() && this.validationIsOn();
}, this);

而 html 中有趣的部分是：

<div data-bind="css: { 'form-group': true, 'has-error': shouldValidateUsername() }">(...)

我正在切换 validationIsOn observable 从而打开和关闭验证。