knockout.js - 淘汰赛验证

Question

我有 asp.net mvc3 项目，我在其中使用淘汰绑定对表进行批量编辑。我想在保存数据的同时进行所需的验证和数字验证等验证。有没有更简单的方法来进行淘汰验证。PS：我没有使用表格。

Answer 1

查看Knockout-Validation，它干净地设置和使用了淘汰文档中描述的内容。下：现场示例1：强制输入为数字

你可以在 Fiddle 中看到它

更新：小提琴已更新为使用最新的 KO 2.0.3 和 ko.validation 1.0.2，使用 cloudfare CDN url

设置 ko.validation：

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

要设置验证规则，请使用扩展程序。例如：

var viewModel = {
    firstName: ko.observable().extend({ minLength: 2, maxLength: 10 }),
    lastName: ko.observable().extend({ required: true }),
    emailAddress: ko.observable().extend({  // custom message
        required: { message: 'Please supply your email address.' }
    })
};

Answer 2

如果您不想使用 KnockoutValidation 库，您可以自己编写。这是强制字段的示例。

添加一个带有所有 KO 扩展或扩展器的 javascript 类，并添加以下内容：

ko.extenders.required = function (target, overrideMessage) {
    //add some sub-observables to our observable
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();

    //define a function to do validation
    function validate(newValue) {
    target.hasError(newValue ? false : true);
    target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
    }

    //initial validation
    validate(target());

    //validate whenever the value changes
    target.subscribe(validate);

    //return the original observable
    return target;
};

然后在您的 viewModel 中通过以下方式扩展您的可观察性：

self.dateOfPayment: ko.observable().extend({ required: "" }),

这种验证方式有许多在线示例。

Answer 3

Knockout.js 验证很方便，但不够健壮。您始终必须创建服务器端验证副本。在您的情况下（当您使用 knockout.js 时），您将 JSON 数据异步发送到服务器并返回，因此您可以让用户认为他看到了客户端验证，但实际上这将是异步服务器端验证。

看看这里的例子upida.cloudapp.net:8080/org.upida.example.knockout/order/create?clientId=1 这是一个“创建订单”链接。尝试点击“保存”，然后玩产品。这个例子是使用来自codeplex的upida库（这个库有spring mvc版本和asp.net mvc）完成的。