使用jQuery.Templates Scenario进行jQuery验证

2023年5月29日 183次阅读

我正在使用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 clientside和DataAnnotations,处理验证的最有效方法是什么,而不重复自己？

最佳答案 我会去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>

希望能帮助到你,

驰

点赞