javascript - knockout validation 组错误检查

Question

我有一个由两部分组成的 knockout 。当填写第一部分时，第二部分被隐藏。完成第一部分并单击“继续”后，第一部分将隐藏并显示第二部分。我希望能够验证第一组输入，如果没有错误则继续下一部分。

我找到了 this在我正在尝试做的官方 github 页面上。

当我这样做时，没有检测到错误。继续到第二部分

function ReserveViewModel(){

    self.firstName = ko.observable("").extend({ required: true });

    self.continue = function(){
        var errors = ko.validation.group([ReserveViewModel.firstName]);
        if (errors.length == 0) {
            //display  second div
        }
        else{
             self.errors.showAllMessages();
        }
    }
}

但是，如果我这样做，它会起作用，但会尝试验证所有内容。由于第二组输入是空的，它就卡在那里。

self.continue = function(){
    self.errors = ko.validation.group(self);
    if (self.errors().length == 0) {

    }
    else{
        self.errors.showAllMessages();
    }
}

Answer 1

您的代码无法正常工作有几个根本原因。在第一个示例中，您已经在 View 模型的上下文中，因此您不需要使用 ReserveViewModel.firstName，在第二个示例中，您要检查“self”中的所有内容，也就是说检查我内部的所有内容验证。有两种简单的方法可以给这只猫剥皮(正如我所见，只短暂地使用过 KO.Validation)-

深度验证 -

function Person(firstname, lastname) {
    var firstName = ko.observable(firstname).extend({ required: true });
    var lastName = ko.observable(lastname).extend({ required: true });
}

function ReserveViewModel(){

    self.person = ko.observable(new Person('John', 'Jingleheimer'));

    self.continue = function(){
        var errors = ko.validation.group(self.person, { deep: true });
        if (errors.length == 0) {
            //display  second div
        }
        else{
             self.errors.showAllMessages();
        }
    }
}

这将验证 person 的所有属性及其“子”属性以确保验证。

下一个例子是简单地创建一个对象数组来检查 -

function myViewModel() {
    var self = this;
    self.firstName = ko.observable().extend({ required: true });
    self.lastName = ko.observable().extend({ required: true });
    self.someOtherProperty = ko.observable().extend({ required: true });

    var firstStepValidation = [
        self.firstName,
        self.lastName
    ];

    var secondStepValidation = [
        self.someOtherProperty
    ];

    self.continue = function(){
        var errors = ko.validation.group(firstStepValidation);
        if (errors.length == 0) {
            //display  second div
        }
        else{
             self.errors.showAllMessages();
        }
    }
}

这将允许您将可观察对象“分块”到数组中以进行测试。这可能比尝试创建单独的 View 模型更容易。