javascript - 如何在淘汰赛中验证复选框

Question

我正在使用 knockout.js 和 knockout.validation 插件。我正在尝试验证复选框，如果它被选中而不是其有效，否则无效。所以为此我在淘汰赛中创建了一个自定义验证属性：

示例小提琴

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

您还可以使用 equal 本机验证器：

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