使用 addClassRules 进行 JQuery 验证：我错过了什么？答案

【问题标题】：JQuery Validate using addClassRules: What am I missing?使用 addClassRules 进行 JQuery 验证：我错过了什么？
【发布时间】：2010-09-14 01:24:59
【问题描述】：

我在 ASP.NET MVC 中编写了一段 sn-p 代码，我在其中尝试使用 jQuery 验证器的 addClassRules 方法。据我所知，我正在直接使用这些示例

http://docs.jquery.com/Plugins/Validation/Reference

但是页面刚刚提交它并没有显示任何错误。我想使用“addClassRules”模式进行验证，因为我正在编写动态表单。

这是我的观点。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ValidateMyForm</title>
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
</head>
<body>
    <% using (Html.BeginForm()) { %>        

        <input type="text" value="" name="customer1" class="customer" />
        <input type="text" value="" id="customer2" name="customer2" class="customer" />
        <input type="text" name="customer3" class="customer" />

        <p>
            <input type="submit" name="submit" value="Submit" />
        </p>
    <% } %>
    <script language="javascript" type="text/javascript">
        jQuery(document).ready(function () {
            // alias required to cRequired with new message
            $.validator.addMethod("cRequired", $.validator.methods.required, "Customer name required");
            // alias minlength, too
            $.validator.addMethod("cMinlength", $.validator.methods.minlength, $.format("Customer name must have at least {0} characters"));
            // combine them both, including the parameter for minlength
            $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
        })
    </script>
</body>
</html>

有什么建议吗？

更新：功能齐全的代码...

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ValidateMyForm</title>
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
</head>
<body>
    <% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "demoform" }))
        { %>        

        <%: Html.TextBox("myTextBox", "", new {@class = "cRequired"}) %>

        <p>
            <input type="submit" name="submit" value="Submit" />
        </p>
    <% } %>
    <script language="javascript" type="text/javascript">
        jQuery(document).ready(function () {
            $.validator.addClassRules("cRequired", { required: true });

            jQuery("#demoform").validate();
        })
    </script>
</body>
</html>

【问题讨论】：

标签： jquery asp.net-mvc validation

【解决方案1】：

以前从未使用过这个验证器，但看起来你的语法有点不对劲。此外，您没有在任何地方定义 cRequired 。

请注意，以下内容均未经过测试。

首先你需要定义 cRequired：

$.validator.addMethod("cRequired", $.validator.methods.required,
  "Customer name required");

接下来，您需要向一个类添加一个验证器（其中“YourClassName”是应该应用到的类。）

jQuery.validator.addClassRules("YourClassName", {
  cRequired: true
});

或

jQuery.validator.addClassRules({
 YourClassName: {
   cRequired: true
 }
});

然后您需要将该类添加到您的输入中：

<input id="txtOne" type="text" class="YourClassName">
<input id="txtTwo" type="text" class="YourClassName">
<input id="txtThree" type="text" class="YourClassName">

希望这会有所帮助...

来源：

【讨论】：

谢谢。在我的上一个示例中，我想我可以将“必需”作为我的规则。不幸的是，虽然这并没有解决我的问题。但我已经更新了我的示例以使用来自docs.jquery.com/Plugins/Validation/Reference 的几乎完全相同的代码。

【解决方案2】：

事实证明，您的 jQuery(document).ready() 函数中也必须包含以下行。

jQuery("#demoform").validate();

“demoform”是您的表单元素的名称。在我的情况下（MVC），我给它起这个名字如下......

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "demoform" })) { %>

【讨论】：

优惠！很高兴你能弄清楚。您应该将此标记为其他面临相同问题的用户的答案。
谢谢，但我会强迫我等待 1 天:) 我已经更新了问题以显示完整的工作解决方案。

【解决方案3】：

你可以试试这个jQuery validation plugin

【讨论】：