如何让 jQuery.validate() 在带有母版页的 ASP.NET 中工作？答案

【问题标题】：How do I get jQuery.validate() to work in ASP.NET with master pages?如何让 jQuery.validate() 在带有母版页的 ASP.NET 中工作？
【发布时间】：2014-03-07 09:09:00
【问题描述】：

我的表单包含母版页和子页..

如何验证子页面内的表单？当我尝试使用母版页时，验证不会运行。但是，当我不使用母版页时，一切正常。

请解释如何让 jQuery Validate 在带有母版页的 ASP.NET 中工作。

【问题讨论】：

母版页总是首先被调用，并将事件绑定到 dom 元素，甚至在子页中创建它们之前。所以验证需要在子页面本身进行。为了减少您的工作，您可以将所有验证功能转移到一个新的 JS 文件中，并将其包含在您的所有子页面中。

标签： jquery asp.net validation jquery-validate

【解决方案1】：

我意识到这有点晚了，但我想我会分享我刚刚经历的发现。

要在 ASP.Net 母版页环境中使用 jQuery 验证，您必须记住占位符会更改包括名称在内的所有内容。由于 .validate() 非常依赖每个字段的名称，因此您必须获取每个字段的客户端名称。由于这可能会根据您的占位符而改变（我的最终看起来像 name="ctl00$ContentPlaceHolder1$FirstName"），因此您的代码应该如下所示：

$(document).ready(function () {
        $('form').validate({
            rules: {
                <%= FirstName.Name %>: {
                    required: true,
                    minlength: 2,
                    maxlength: 25
                },
                <%= LastName.Name %>: {
                    required: true
                },
                <%= Email1.Name %>: {
                    required: true,
                    email: true
                },
                <%= Email2.Name %>: {
                    required: true,
                    email: true,
                    equalTo: "#<%= Email1.ClientID %>"
                },
                <%= Password1.Name %>: {
                    required: true,
                    minlength: 7
                },
                <%= Password2.Name %>: {
                    required: true,
                    minlength: 7,
                    equalTo: "#<%= Password1.ClientID %>"
                }
            },
            messages:{
                <%= FirstName.Name %>: {
                    required: "Please enter your first name.",
                    minlength: $.validator.format("Your first name must be at least {0} characters.")
                },
                <%= LastName.Name %>: {
                    required: "Please enter your last name.",
                    minlength: $.validator.format("Your last name must be at least {0} characters.")
                },
                <%= Email1.Name %>: {
                    required: "Please enter your email address.",
                    email: "Please enter a valid email address."
                },
                <%= Email2.Name %>: {
                    required: "Please confirm your email address.",
                    email: "Please confirm with a valid email address.",
                    equalTo: "Email entries do not match."
                },
                <%= Password1.Name %>: {
                    required: "Please enter a password",
                    minlength: $.validator.format("Your password must be at least {0} characters.")
                },
                <%= Password2.Name %>: {
                    required: "Please confirm your password.",
                    equalTo: "Passwords do not match."
                }
            },
            errorClass: "error-label",
            wrapper: "li",
            errorLabelContainer: "#ErrorSection"
        });
    });

这段代码直接取自我使用jQuery Validation 1.12.0 版和jQuery 1.11.0 版的工作网页。

编辑：我应该补充一点，我正在验证的所有输入也是 runat="server" 用于服务器端交互。

【讨论】：