淘汰赛映射验证

Posted 2023-02-22

【中文标题】淘汰赛映射验证

【英文标题】：Knockout Mapping Validation

【发布时间】：2012-12-05 16:25:53

【问题描述】：

我正在尝试将验证附加到映射视图。 我正在使用 Knockout 映射和验证插件。 伪模型：

Person 
    int Id;
    string Name;
    Book[] Books;


Book 
    int Id;
    string Name;

javascript：

function viewModel() 
    var self = this;
    self.persons = ko.observableArray();

    // persons are retrieved via AJAX...
    ko.mapping.fromJS(persons, , self.persons);


jQuery(function( $ ) 
    ko.applyBindings(new viewModel());
);

如何扩展 people observableArray 以设置验证规则和消息？ 我需要验证人员和书籍子数组属性。 我发现只有使用显式模型设置的示例，没有自动映射，例如：

Name: ko.observable().extend( required: true )

然后我需要设置 ko.validatedObservable、isValid 和 validation.init，但我真的不知道如何处理/组织这个。你能提供一些帮助吗？

【参考方案1】：

我发现至少有两种方法可以为通过 ko.mapping 插件创建的模型或视图模型对象提供验证：

在创建某些属性时使用映射选项附加验证规则 html5 属性。这仅支持某些验证（即必需的模式）。详情请见documentation for the Knockout-Validation plugin

以上两种技术也可以结合使用。有关示例，请参阅以下fiddle。

---

1。使用映射选项

Knockout Mapping 插件允许在要自定义的映射对象上创建某些属性。利用此功能，您可以覆盖插件的默认行为并为您的映射属性添加验证。下面是一个例子

HTML

<input data-bind="value: name" />

Javascript

var data =  name: "Joe Shmo" ;

var validationMapping = 
    // customize the creation of the name property so that it provides validation
    name: 
        create: function(options) 
            return ko.observable(options.data).extend( required: true );
        
    
;

var viewModel = ko.validatedObservable(ko.mapping.fromJS(data, validationMapping));
ko.applyBindings(viewModel);

2。 HTML5 属性

Knockout Validation 插件支持一组有限的 HTML5 验证属性，可用于您的 HTML 控件。但是，使用它们需要启用parseInputAttributes 选项。这是一个简单的例子：

HTML

<input data-bind="value: name" required />

Javascript

// this can also be configured through the "validationOptions" binding (https://github.com/ericmbarnard/Knockout-Validation/wiki/Validation-Bindings)
ko.validation.configure(
    parseInputAttributes: true
);

var data =  name: "Joe Shmo" ;

var viewModel = ko.validatedObservable(ko.mapping.fromJS(data));
ko.applyBindings(viewModel);

【讨论】：

您还可以包括在数据绑定内部扩展的能力。像下面这样 data-bind="value: name.extend( required: true, email: true )"

【参考方案2】：

另一种方法是在映射后扩展可观察对象。

function viewModel() 
    var self = this;
    self.persons = ko.observableArray();

    // persons are retrieved via AJAX...
    ko.mapping.fromJS(persons, , self.persons);


    self.Name.extend( required: true );

【讨论】：

看起来很疯狂。你的魔法是如何运作的？ viewModel 的 self.Name 属性应该是未定义的。

这个概念对我来说很好，但不能说这个确切的例子。