Javascript 将视图模型映射到KnockoutJS验证

Javascript 将视图模型映射到KnockoutJS验证,javascript,asp.net-mvc,validation,knockout.js,Javascript,Asp.net Mvc,Validation,Knockout.js,我一直在使用ASP.NET MVC 2构建一个页面,使用KnockoutJS、KnockoutJS映射插件和JQuery1.7.1。我希望能够使用KnockoutJS验证插件(find)。但是,我需要同时进行服务器端和客户端验证 是否可以将我的视图模型映射到使用.extend()方法的 编辑:示例。自动打开此选项: [Required] public string Firstname { get; set; } 为此: var viewmodel = { firstname: ko.o

我一直在使用ASP.NET MVC 2构建一个页面,使用KnockoutJS、KnockoutJS映射插件和JQuery1.7.1。我希望能够使用KnockoutJS验证插件(find)。但是,我需要同时进行服务器端和客户端验证

是否可以将我的视图模型映射到使用.extend()方法的

编辑:示例。自动打开此选项:

[Required]
public string Firstname { get; set; }
为此:

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

验证插件的工作方式是扩展要验证的观测值

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


或者,如果需要,可以使用验证绑定。阅读Github上关于淘汰验证的自述文件,您可以看到他们是如何进行验证的。

我建议使用内置的MVC客户端验证,您可能需要调用它,请尝试以下操作:

$.validator.unobtrusive.parse(yourFormElement)
代码来源:


不确定MVC2是否有不引人注目的客户端验证,但不确定是否有必要升级到MVC3。在中,我实现了一个引擎,在knockout.js上启用通常的Mvc验证(数据注释或任何内容)。客户端和服务器端验证都可以启用。此外,knockout可以与Mvc助手一起使用,一些绑定是自动推断的,等等。

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

无论您想在页面上的何处显示错误消息,都应包括一个span标记,如下所示:

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

这比其他许多验证解决方案要简单和灵活得多。您可以将错误消息定位到任何您想要的位置,并且不需要学习如何使用某些验证库,而且无论服务器端技术如何,此方法都可以工作。

您是在C#模型上使用数据注释,还是使用EditorFor填充客户端验证规则,还是希望?您可以使用MVC内置的相同的不引人注目的客户端验证,您可以在不需要太多工作的情况下(至少在带有Internet应用程序模板的MVC3中)将其用于标准MVC样式的表单。请参阅我在原文中的编辑。这是一种非常有趣的方法,我对此进行了很多思考。我一直在考虑从C#到Javascript生成行为代码。也就是说,我认为您必须创建一些反映模型并生成javascript的东西。也许只是验证部分,让映射插件做它所做的。映射和生成的验证代码的组合可以满足您的需要。我认为您需要生成验证代码的原因是,我认为您将很难仅使用Javascript生成验证代码,但我可能错了。您当前如何在视图中生成标记?是否手动添加数据绑定=“value:someProp”?这不是验证KnockoutJs的首选方法。您不想验证表单元素。您想验证视图模型。是否有一种简单的方法可以使用敲除验证重用DataAnnotations或FluentValidator.Net代码,并让它验证敲除视图模型?我宁愿避免创建和维护两组验证规则,但如果Knockout viewmodel和.Net模型不匹配或太不相似,这可能会更加困难。“这不是验证KnockoutJs的首选方法”。为什么?验证连接到用户输入,输入元素通常映射到模型属性。显示未连接到输入字段但连接到用户不可见的某个模型属性的错误消息可能会让用户非常困惑。+1我喜欢您的解决方案的简单性。我目前正在努力与jQuery valdiate进行非必填字段和淘汰测试,您的回答为我指明了一个新的方向。如果您能让我们开始了解如何使用MVC控件工具包实现它,那就太好了。非常感谢
 if ($("[name='validationError']:visible").length > 0) {
        alert('Please correct all errors before continuing.');
        return;
    }