Knockout验证

Question

Knockout验证

knockout.jsvalidationknockout-validation

48

我有一个使用knockout绑定的asp.net mvc3项目，其中我对一张表进行批量编辑。我想在保存数据时进行必填和数字验证。有没有更简单的方法来进行knockout验证。 PS: 我没有使用表单。

- Kurkula

3个回答

6

如果您不想使用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: "" }),

这种类型的验证有很多在线示例。

- ChrisW

好的，但是我通过ajax和mvc razor以及knockout.mapping从服务器端获取我的视图模型。我还使用.net mvc、newton json转换和html原始帮助程序直接从服务器端导入JavaScript模块...现在...如何才能扩展我的observables而不必一次观察一个字段？ - Clarence

-24

Knockout.js的验证很方便，但不够健壮。您总是需要创建服务器端验证副本。在您的情况下（因为您使用knockout.js），您正在异步地向服务器发送JSON数据，然后再将其发送回来，因此您可以让用户认为他看到了客户端验证，但实际上它是异步服务器端验证。

在这里查看示例upida.cloudapp.net:8080/org.upida.example.knockout/order/create?clientId=1 这是一个“创建订单”的链接。尝试单击“保存”并使用产品。此示例使用upida库完成（该库有spring mvc版本和asp.net mvc版本），可在codeplex上找到。

- user2626270

19

这并不是仅限于Knockout框架。所有的JavaScript代码都需要在服务器端进行验证。 Knockout Validation库用于在客户端进行验证。 - Mike

在客户端先进行验证，然后通过服务器端确保验证是一个事实，这与您使用KO或任何其他框架无关。因此，除非必要，否则在ping服务器端验证时添加额外的周期是没有用的。 - DropHit

@SeanThorburn 同意。我甚至觉得那不是一个很糟糕的答案。我可以看到在某些情况下这个方法能够相当不错地发挥作用。 - MPavlak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cohen · Accepted Answer

可以看看Knockout-Validation，它干净地设置和使用了在 Knockout 文档中所描述的内容。在: Live Example 1: Forcing input to be numeric下面。

您可以在Fiddle中查看实时示例

更新: 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.' }
    })
};