Question

我在一个绑定到多个控件的页面中有模型。基于某些条件，这些控件中的一些将是可见的或不可见的。在最后的提交中，我应该只验证那些可见的。

以下是解释我的要求的示例代码

<script src="knockout-3.4.0.js" type="text/javascript"></script>
    <input type="checkbox" data-bind="checked:requireAge"  >Age Required</input><br />
    Name : <input data-bind="value:Name" /><br />
    <div data-bind="visible:requireAge">
        Age: <input data-bind="value:Age,visible:requireAge" />
    </div>

    <button type="button" onclick="validateModel();">Validate</button>
    <script type="text/javascript">
        var viewModel = { Name: ko.observable(), Age: ko.observable(),requireAge:ko.observable(false) };
        ko.applyBindings(viewModel);
        function validateModel() {
            //validate visible properties and throw a common message that all visible fields should be filled
        }
    </script>

Answer 1

我的建议是使用敲除验证库（你没有在你的问题中提及它，所以我假设你还没有使用它）它与敲除无缝结合，使验证更加方便。我在过去的一年里广泛使用它，它让我的生活变得更加容易。无需创建计算以跟踪observable是否包含有效值。您可以在github上找到敲除验证库。

在您的情况下，您可以简单地执行以下操作：

var viewModel = function(){ 
  var self = this;
  self.name = ko.observable();      
  self.requireAge = ko.observable(false);
  self.age = ko.observable().extend({ 
      required: {  
        onlyIf: function() { return self.requireAge(); } 
    } 
  });
};

验证错误消息会自动插入到observable绑定的元素下面。您也可以创建自己的验证规则，但有很多可以直接使用，包括上面演示的那些。您甚至可以为某些规则使用某些数据属性。这可能是与淘汰赛一起进行验证的最佳方式。

Answer 2

根据某些条件，其中一些控件可见或不可见。

如果模型中包含这些条件会更好。还有验证方法。

请参阅代码段：

＆＃13;

var viewModel = function() {
	this.Name = ko.observable("");
	this.Age = ko.observable("");
	this.requireAge = ko.observable(false);
	this.isValid = ko.computed(function() {
		if (ko.unwrap(this.Name).length === 0) return false;
		if (ko.unwrap(this.requireAge) &&
			ko.unwrap(this.Age).length === 0) return false;
		return true;
	}, this);
};

window.onload = function() {
	ko.applyBindings(new viewModel());
};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="checkbox" data-bind="checked:requireAge"  >Age Required</input><br />
Name : <input data-bind="value:Name" /><br />
<div data-bind="visible:requireAge">
    Age: <input data-bind="value:Age,visible:requireAge" />
</div>

<div>is valid: <span data-bind="text: isValid"></span></div>

＆＃13;

KnockoutJS：仅在绑定控件可见时才验证模型的属性

2 个答案: