Question

我正在使用jQuery模板来处理我正在研究的一堆网站，并且已经达到了我需要决定如何实施验证的目的。 Serverside是一个Asp.Net Mvc Restful服务，可以处理各种模型。模型使用DataAnnotations进行修饰以描述验证。下面是一个示例（请注意，我们正在使用资源文件进行错误复制）：

    [Required(
        ErrorMessageResourceType = typeof(Validation),
        ErrorMessageResourceName = "HomeAddressRequired")]
    [StringLength(250,
        ErrorMessageResourceType = typeof(Validation),
        ErrorMessageResourceName = "HomeAddressStringLength")]
    public string Address { get; set; }

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

我在这里看到三个选项：

修改模板以手动包含验证和错误副本。这个很糟糕，因为我将被迫分别维护客户端和服务器端验证;它有点杀死了DataAnnotations的整个想法。
利用Razor和Mvc 3不显眼的javascript方法来帮助我渲染模板。更好，因为它为我重现了验证，但是性能受到了影响。也意味着我正在使用服务器端模板引擎...来呈现模板。我可以通过输出缓存来最小化性能。
仅依靠远程验证返回模型的模型状态并为jQuery Validate编写自己的适配器，以处理路由错误到正确的元素。这个必须使用Razor，但杀死纯客户端验证，意味着我必须编写一个复杂的插件。

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

那么，对于我的问题：在我的模型服务器端利用jQuery Templates客户端和DataAnnotations，处理验证的最有效方法是什么，而不重复自己？

Answer 1

我会选择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>

希望它有所帮助，

志

使用jQuery.Templates Scenario进行jQuery验证

1 个答案: