将视图模型映射到 KnockoutJS 验证答案

【问题标题】：Map view models to KnockoutJS Validation将视图模型映射到 KnockoutJS 验证
【发布时间】：2012-03-07 10:18:01
【问题描述】：

我一直在使用 ASP.NET MVC 2 使用 KnockoutJS、KnockoutJS 映射插件和 jQuery 1.7.1 构建一个页面。我还希望能够使用 KnockoutJS 验证插件（找到 here）。但是，我需要同时进行服务器端和客户端验证。

是否可以让我的视图模型映射到使用 .extend() 方法的KnockoutJS Validation plugin？

编辑：示例。自动转这个：

[Required]
public string Firstname { get; set; }

进入这个：

var viewmodel = {
    firstname: ko.observable().extend({ required: true });
}

【问题讨论】：

您是否在 C# 模型上使用数据注释并使用 EditorFor 填充客户端验证规则，或者您愿意吗？您可以使用 MVC 内置的相同不显眼的客户端验证，您可以将其用于标准 MVC 样式的表单，而无需太多工作（至少在 MVC3 中使用 Internet 应用程序模板）。
请在原文中查看我的编辑
这是一个非常有趣的方法，我已经考虑了很多。我一直在考虑生成从 C# 到 Javascript 的行为代码。也就是说，我认为您必须创建一些反映模型并生成 javascript 的东西。也许只是验证部分，让映射插件完成它的工作。映射和生成的验证代码的组合可以为您提供所需的内容。我认为您需要生成验证代码的原因是因为我认为您将很难仅使用 Javascript 生成验证代码，但我可能错了。
您当前如何在视图中生成标记？您是否手动添加 data-bind="value: someProp"？

【解决方案1】：

在Mvc Controls Toolkit 中，我实现了一个引擎，可以在 knockout.js 上启用通常的 Mvc 验证（数据注释或其他）。客户端和服务器端验证都可以启用。此外，敲除可以与 Mvc 助手一起使用，一些绑定是自动推断的，等等。

【讨论】：

【解决方案2】：

如果您使用的是 knockoutjs 和 jquery，我想出了以下非常简单的方法来进行基本的客户端验证。

无论您想在页面上的何处显示错误消息，都可以包含一个像这样的 span 标签：

<span name="validationError" style="color:Red" 
data-bind="visible: yourValidationFunction(FieldNameToValidate())">
* Required.
</span>

显然你需要编写“yourValidationFunction”来做任何你想做的事情。它只需要返回true或false，true表示显示错误。

如果显示任何验证错误，您可以使用 jquery 阻止用户继续操作。你可能已经有一个保存按钮来触发一个 javascript 函数来执行一些 ajax 或其他什么，所以只需在它的顶部包含这个：

 if ($("[name='validationError']:visible").length > 0) {
        alert('Please correct all errors before continuing.');
        return;
    }

这比现有的许多其他验证解决方案更简单、更灵活。您可以将错误消息放置在您想要的任何位置，并且您无需学习如何使用某些验证库，并且无论服务器端技术如何，此方法都有效。

【讨论】：

【解决方案3】：

我建议使用内置的 MVC 客户端验证，您可能需要调用它，试试这个：

$.validator.unobtrusive.parse(yourFormElement)

不确定 MVC2 是否具有不显眼的客户端验证，不确定是否可以在必要时升级到 MVC3。

【讨论】：

这不是验证 KnockoutJs 的首选方式。您不想验证表单元素。您想要验证视图模型。
是否有一种简单的方法可以通过 Knockout 验证重用 DataAnnotations 或 FluentValidator .Net 代码并让它验证 Knockout 视图模型？我宁愿避免创建和维护两组验证规则，但如果 Knockout 视图模型和 .Net 模型不匹配或太不相似，这可能会更加困难。
“这不是验证 KnockoutJs 的首选方式”。为什么？验证连接到用户输入，输入元素通常映射到模型属性。显示未连接到输入字段但连接到用户不可见的某些模型属性的错误消息可能会让用户很困惑。

【解决方案4】：

验证插件以您扩展要验证的可观察对象的方式工作。

它们是否是从映射创建的并不重要，只需创建一个在映射完成后运行的函数并添加所需的所有验证即可。

或者，如果您愿意，可以使用验证绑定。阅读 Github 上的自述文件以进行淘汰赛验证，您会了解他们是如何做到的。

【讨论】：