Question

我有两个带有value绑定的文本框，用于两个可观察对象：first和second。有两个保存按钮，click绑定到函数save1和save2。

我应该满足的情景：

适用于save1功能：

当我在first中输入内容时，second中没有任何内容，并且点击了save1：意味着它应该保存。
当我在first中输入内容并在second中输入值时，点击save1：表示其应该针对second验证first并确保second大于first。

适用于save2功能：

与save1完全相反，即：

当我在second中输入内容时，first中没有任何内容，我点击save2：表示应该保存。
当我在second中输入内容并在first中输入值时，点击save2：表示它应该对first进行第二次验证，并确保{ {1}}小于first。

这个场景看起来非常简单，但我被阻止前进以完成代码。我尝试了一个小提琴，基本上这里给出了代码（缩写为make post readable）：

查看型号：

second

查看：

var viewModel = function() {
    var self=this;
    self.first=ko.observable();
    self.second=ko.observable();

   //custom validation code & click functions
   self.validatefirst=ko.validatedObservable([
   self.first.extend({//code here}) ])

   self.validatesecond=ko.validatedObservable([
   self.second.extend({//code here}) ])
}

另见my jsfiddle with complete code。

到目前为止，我可以看到我觉得我们无法实现这一点，因为只有一个可观察的地方我们尝试为两个按钮执行多项操作。

对此有任何帮助表示赞赏。

Answer 1

我为每个按钮使用了一个observable，如果单击该按钮，则设置为true。这用于仅触发我与onlyIf一起使用的必需和数字验证。然后我在second()上添加了两个自定义验证器来执行比较检查。

var viewModel = function() {
    var self=this;

    self.first=ko.observable('');
    self.second=ko.observable('');
    self.validateFirst = ko.observable(false);
    self.validateSecond = ko.observable(false);

    self.first.extend({
        required: {
            message: "First is required",
            onlyIf: function () { return self.validateFirst();}
        },
        number: {
            message: "Not a number",
            onlyIf: function () { return self.validateFirst();}
        }
    });

    self.second.extend({
        required: {
            message: "Second is required",
            onlyIf: function () { return self.validateSecond();}
        },
        number: {
            message: "Not a number",
            onlyIf: function () { return self.validateSecond();}
        },
        validation: [{
            validator: function (val) {
                if (!self.validateFirst() || self.second() === '') {
                    return true;        
                }

                var secondInt = parseInt(self.second());
                var firstInt = parseInt(val);
                return secondInt > firstInt;
            },
            message: 'Please enter second value greater than first value'
        },
        {
            validator: function (val) {
                if (!self.validateSecond() || self.first() === '') {
                    return true;        
                }

                var firstInt = parseInt(self.first());
                var secondInt = parseInt(val);
                return secondInt > firstInt;
            },
            message: 'Please enter second value greater than first value'
        }]
    });

    self.save1=function(){
        self.validateSecond(false);
        self.validateFirst(true);

        if(self.isValid()){
            alert('Saved');
        }
        else {
            self.errors.showAllMessages();
        }
    };

    self.save2=function(){
        self.validateFirst(false);
        self.validateSecond(true);

        if(self.isValid()){
            alert('Saved');
        }
        else {
            self.errors.showAllMessages();
        }
    };

    ko.validatedObservable(self);
};

jsFiddle

点击两个按钮的验证

1 个答案: