2

我有这个 jsFiddle http://jsfiddle.net/63qJe/3/可以工作,但没有显示验证方法。

HTML:

<input type="checkbox" data-bind="checked: approveTerms"/>
<label for="algvw">Yes, I agree to the general terms and conditions</label>
<span data-bind="validationMessage: approveTerms"></span>
<button type="button" data-bind="click: stepForward">Commit order</button>

JS:

ko.validation.rules['checkedTerms'] = {
    validator: function (value) {
        console.log(value);
        if (!value)
            return false;
        return true;
    }
};
function ovm() {
    var self = this;
    self.approveTerms = ko.observable(false).extend({
        checkedTerms: { message: 'Approval required' }
    });
    self.currentStep = ko.observable(1);
    self.stepForward = function () {
        if (self.currentStep() === 1)
            commitOrder(self);
    };
}
window.vm = new ovm();
ko.applyBindings(vm);

function commitOrder(vm) {
    if (vm.approveTerms())
        alert("GO!");
    else
        alert("Nooooooooo");
}

我对 KO 还很陌生,仍在学习。我在文本字段上有其他验证器并且这些验证器可以工作,但是这个复选框让我很头疼。

为什么我不能这样做:

self.approveTerms = ko.observable(false).extend({ required: true, message:'approval req.' });
4

2 回答 2

4

如果您要创建自定义验证器规则,则需要调用

 ko.validation.registerExtenders();

在您的自定义规则之后,为了验证插件注册新的验证器。

演示JSFiddle

或者,如果您只想检查您的复选框是否被选中,您可以使用内置 equal验证器:

self.approveTerms = ko.observable(false).extend(
    { equal: { params: true, message:'approval req.' }});

演示JSFiddle

于 2013-08-16T11:13:02.293 回答
1

改用自定义验证器

var checkedTerms = function (value) {
        alert(value);
        console.log(value);
        if (!value) {
            return false;
        }
        return true;
    };

function ovm() {
    var self = this;
    self.approveTerms = ko.observable(false).extend({
        validation: { validator:checkedTerms, message: 'Approval required' }
    });
    self.currentStep = ko.observable(1);
    self.stepForward = function () {
        if (self.currentStep() === 1)
            commitOrder(self);
    };
}

这是工作小提琴:http: //jsfiddle.net/63qJe/5/

于 2013-08-16T11:15:30.147 回答