如何验证淘汰赛中的复选框

Question

我正在使用knockout.js和knockout.validation插件.我正在尝试验证复选框,如果选中它的有效则无效.为此我在淘汰赛中创建了一个自定义的valdation属性:

示例小提琴

ko.validation.rule['checked'] = {
    validator: function (value) {
        if (!value) {
            return false;
        }
        return true;
    }
};

而我的观点模型是:

function VM()
{
    var self = this;
    self.Approve = ko.observable(false).extend({
        checked: { message: 'Approval required' }
    });
    self.Errors = ko.validation.group(self);
    self.Validate = function(){
        if(self.Errors().length > 0)
        self.Errors.showAllMessages();
    };
}

但验证不起作用.谁能告诉我这里我做错了什么？

Answer 1

您当前的方法存在一些问题:

1. 你错过了打字ko.validation.rule它应该是ko.validation.rules
2. ko.validation.registerExtenders();应在首次尝试使用自定义验证程序之前完成自定义规则定义和调用.

3. 为了显示验证,您需要使用绑定将其绑定到某处validationMessage:

   <span data-bind='validationMessage: Approve'></span>
   

所以固定脚本:

ko.validation.rules['checked'] = {
    validator: function (value) {
      console.log(value);
        if (!value) {
            return false;
        }
        return true;
    }
};

ko.validation.registerExtenders();

function VM()
{
  var self = this;  
  self.Approve = ko.observable(false).extend({
    checked: { message: 'Approval required' }
  });

  self.Errors = ko.validation.group(self);

  self.Validate = function(){    
     if(self.Errors().length > 0)
       self.Errors.showAllMessages();
  };
}

ko.applyBindings(new VM());

和HTML:

<input type="checkbox" data-bind="checked: Approve" />  
<span data-bind='validationMessage: Approve'></span>
<button type="button" data-bind="click: Validate">Submit</button>

你可以在这里试试:演示.

Answer 2

您还可以使用相等的本机验证器：

self.Approve = ko.observable(false).extend({
    equal: { params: true, message: 'check must be ticked' }
  });