淘汰赛验证答案

【问题标题】：Knockout validation淘汰赛验证
【发布时间】：2012-02-18 06:24:58
【问题描述】：

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

【问题讨论】：

标签： knockout.js validation knockout-validation

【解决方案1】：

看看Knockout-Validation，它干净地设置并使用了knockout documentation 中描述的内容。下：现场示例1：强制输入为数字

你可以see it live in Fiddle

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

设置 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.' }
    })
};

【讨论】：

是我还是 IE9 和 IE10 上的小提琴坏了？可在 Chrome 和 Firefox 上运行。
@rob：为了让它在 IE 中工作，我删除了资源并将 knockout.validation 复制到小提琴中（丑，我知道），但是它确实有效：jsfiddle.net/KHFn8/1369跨度>
谢谢科恩。所以现在我有信心它会在我的网站上工作，即使它在 jsfiddle 上很丑陋。 :-)
这里是来自 eric barnard 的原始小提琴的工作版本，它并不丑陋。 :) jsfiddle.net/alexdresko/KHFn8/2403
JS Fiddles 通过 GitHub 链接到 Knockout 文件 - 不再托管旧版本。（许多链接示例引用 v2.1，现在在 v2.2 上。它们也不再托管 knockout-latest.js）。

【解决方案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 中通过以下方式扩展您的 observable：

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

网上有很多这种验证方式的例子。

【讨论】：

好的，但是我通过 ajax 和 mvc razor 和 knockout.mapping 从服务器端获取我的视图模型。我还使用 .net mvc、newton json 转换和 htlml 原始助手直接从服务器端导入 javaScript 模块......现在....如何在不一次应用观察一个字段的情况下扩展我的 observables

【解决方案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）完成的。

【讨论】：

-1 这不是 Knockout 特有的。所有 JavaScript 也需要始终在服务器上进行验证。 Knockout Validation 库验证客户端。
添加额外的周期来 ping 服务器端验证我认为除非必要，否则实际上你可以先验证客户端 :) 然后通过服务器端确保。无论您使用 KO 还是任何其他框架，这都是事实
@SeanThorburn 同意。我什至不认为这是一个糟糕的答案。我可以看到这在某些情况下工作得相当好。