4

我正在为我正在开发的一堆网站使用 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 模板，这不太可行。

我在这里看到三个选项：

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

  2. 利用 Razor 和 Mvc 3 不显眼的 javascript 方法来帮助我呈现模板。更好，因为它为我重现了验证，但性能受到了影响。也意味着我正在使用服务器端模板引擎...来呈现模板。我可以通过输出缓存将性能影响降到最低。

  3. 仅依靠为我的模型返回模型状态的远程验证，并为 jQuery Validate 编写我自己的适配器，以处理到正确元素的路由错误。这个解决了不得不使用 Razor 的问题，但会扼杀纯客户端验证，这意味着我必须编写一个复杂的插件。

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

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

4

1 回答 1

2

我会去 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>

希望能帮助到你，

志

于 2011-02-16T23:11:23.383 回答