淘汰赛映射验证(Knockout Mapping Validation)

2019-07-05 16:31发布

我试图验证连接到映射视图。 我使用的是淘汰赛映射和验证插件。 少女模特儿:

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());
});

如何延长人observableArray设置验证规则和讯息? 我需要验证两个人都和书籍子阵列性能。 我发现只有使用明确的模式设置,而无需自动映射的例子,是这样的:

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

然后,我需要设置ko.validatedObservable,isValid方法和validation.init,但我真的不知道如何处理/组织这一点。 能否请您提供一些帮助?

Answer 1:

我发现提供的验证模型,或者是通过ko.mapping插件创建视图模型对象至少有两种方法:

  1. 使用映射选项附加验证规则造成了某些属性时
  2. HTML5属性。 这是仅支持一些验证(即所需,图形)。 见淘汰赛验证插件文档的详细信息

上述两种技术也可以合并。 请参阅以下捣鼓的一个例子。


1.使用映射选项

该敲除映射插件允许上映射的对象的某些属性的创建来定制。 以利用此功能,您可以覆盖插件的默认行为,并为您的映射属性添加验证。 下面是一个例子

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属性

淘汰赛验证插件支持有限的,可以在你的HTML控件使用HTML5验证属性。 然而,使用起来需要启用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);


Answer 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 });
}


文章来源: Knockout Mapping Validation