使用jQuery.Templates进行jQuery验证的场景_Jquery_Asp.net Mvc_Asp.net Mvc 3_Jquery Validate_Jquery Templates

使用jQuery.Templates进行jQuery验证的场景

jquery asp.net-mvc asp.net-mvc-3

使用jQuery.Templates进行jQuery验证的场景,jquery,asp.net-mvc,asp.net-mvc-3,jquery-validate,jquery-templates,Jquery,Asp.net Mvc,Asp.net Mvc 3,Jquery Validate,Jquery Templates,我正在为我正在工作的一系列站点使用jQuery模板，并且已经到了需要决定如何实现验证的地步，clientside。服务器端是一个Asp.NETMVC Restful服务，处理各种模型。模型用数据注释修饰以描述验证。下面是一个示例（请注意，我们正在使用一个资源文件进行错误复制）：以前，我只是使用Razor（或者在切换到Mvc 3之前使用的旧Asp.Net视图引擎），它负责生成jquery.validate.js所需的所有客户端装饰。现在我正在使用jQuery模板，这就不太可行了我在这里看到三种

我正在为我正在工作的一系列站点使用jQuery模板，并且已经到了需要决定如何实现验证的地步，clientside。服务器端是一个Asp.NETMVC Restful服务，处理各种模型。模型用数据注释修饰以描述验证。下面是一个示例（请注意，我们正在使用一个资源文件进行错误复制）：

以前，我只是使用Razor（或者在切换到Mvc 3之前使用的旧Asp.Net视图引擎），它负责生成jquery.validate.js所需的所有客户端装饰。现在我正在使用jQuery模板，这就不太可行了

我在这里看到三种选择：

修改模板以手动包含验证和错误副本。这个很糟糕，因为我将被迫分别维护客户端和服务器端验证；这有点扼杀了DataAnnotation的整个理念

利用Razor和Mvc 3的低调javascript方法来帮助我呈现模板。更好，因为它为我复制了验证，但是性能很好。也就是说我正在使用服务器端模板引擎…来呈现模板。我可以通过输出缓存将性能影响降至最低

完全依赖远程验证，该验证返回我的模型的模型状态，并为jQuery Validate编写我自己的适配器，以处理到正确元素的路由错误。这一个绕过了必须使用Razor，但破坏了纯客户端验证，意味着我必须编写一个复杂的插件

理想情况下，当我们部署这个东西时，我应该能够将模板作为静态文件提供给客户机，而不需要任何直接的后端依赖关系

因此，对于我的问题：在我的模型服务器端利用jQuery模板客户端和数据注释，在不重复我自己的情况下处理验证的最有效方法是什么？我将使用2）

错误模板可以位于客户端。性能不友好的服务器端代码是设置jQuery.validation规则的代码。但这是无法避免的，因为您的规则是在.NET模型中定义的

我今天也遇到了类似的问题，但在样式方面，我不太喜欢jQuery.validation如何为您创建标签。我想用jQuery模板覆盖输出。我还希望我的输出位于表的另一个单元格中

显然，您可以覆盖插件中的validator.prototype.showLabel函数。现在，您可以完全控制在何处显示以及在出现故障时显示什么

下面是一个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>


    <script type="text/javascript">
        $.extend($.validator.prototype, {
            showLabel: function (element, message) {
                $(element).siblings('.validationLabel').remove();
                $('#tmplValidationLabel').tmpl({ Message: message }).insertAfter($(element));
            }
        });
    </script>
</head>
<body>


<form>
    <div><input type="text" name="Email" /></div>
    <div><input type="text" name="SomeName" /></div>
    <input type="submit" value="Submit" />
</form>



<script type="x-jquery-tmpl" id="tmplValidationLabel">
<span class="validationLabel">
    <b>${Message}</b> <span> :( </span>
</span>
</script>

<script type="text/javascript">
    $(function () {

        $('form').validate({
            rules: {
                Email: { required: true, email: true },
                SomeName: "required"
            },
            messages: {
                Email: { required: "Enter Email", email: "Not an email" },
                SomeName: "Enter something man!"
            }
        });
    });
</script>
</body>
</html>


$.extend（$.validator.prototype{
showLabel:功能（元素、消息）{
$（元素）。同级（'.validationLabel'）.remove（）；
$（'#tmplValidationLabel'）.tmpl（{Message:Message}）.insertAfter（$（元素））；
}
});
${Message}:（
$（函数（）{
$（'form'）。请验证({
规则：{
电子邮件：{required:true，Email:true}，
SomeName：“必需”
},
信息：{
电子邮件：{必填：“输入电子邮件”，电子邮件：“非电子邮件”}，
SomeName：“输入一些东西，伙计！”
}
});
});

希望有帮助

Chi

我已经添加了我认为可以使用的方法，包括优点/缺点。我有一种感觉，我最终会回答我自己的问题：）。那很酷；我相信将来会有越来越多的.Net开发人员遇到这个问题。杜斯达：你不是唯一一个。我也有同样的问题。我正在考虑jQuery.validation的“prototype.showLabel”上的$.extend，其中标签是用我的.tmpl（）代码生成的。如果我能让它工作，我会在这里发布。：）谢谢你，迟。我仍在为此开发“圣杯”解决方案，但还没有找到一个我满意的可重用模式。我确信客户端渲染是未来的趋势，web服务器将逐渐成为纯粹的ajax/websocket web服务，提供静态文件；只是要找到一种方法来组织这一切，这样我就不必重复我自己：）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>


    <script type="text/javascript">
        $.extend($.validator.prototype, {
            showLabel: function (element, message) {
                $(element).siblings('.validationLabel').remove();
                $('#tmplValidationLabel').tmpl({ Message: message }).insertAfter($(element));
            }
        });
    </script>
</head>
<body>


<form>
    <div><input type="text" name="Email" /></div>
    <div><input type="text" name="SomeName" /></div>
    <input type="submit" value="Submit" />
</form>



<script type="x-jquery-tmpl" id="tmplValidationLabel">
<span class="validationLabel">
    <b>${Message}</b> <span> :( </span>
</span>
</script>

<script type="text/javascript">
    $(function () {

        $('form').validate({
            rules: {
                Email: { required: true, email: true },
                SomeName: "required"
            },
            messages: {
                Email: { required: "Enter Email", email: "Not an email" },
                SomeName: "Enter something man!"
            }
        });
    });
</script>
</body>
</html>