使用 jquery 验证插件为多个控件显示单个验证消息

Question

我正在为我的表单控件使用 jquery 验证插件。我可以很容易地用三个不同的消息验证三个单独的控件，并对数字、最小长度、最大长度进行适当的验证。我有网络参考、出生日期、邮政编码和其他字段等控件，它们有多个文本框。以下是网页参考的html，

<input name="txtRef1" runat="server" type="text" id="txtRef1" />
<span class="ForwardSlash">-</span>
<input runat="server" name="txtRef2" type="text" id="txtRef2"  />
<span class="ForwardSlash">-</span>
<input runat="server" name="txtRef3" type="text" id="txtRef3"  />

我为此编写了一个自定义验证器方法，它检查如果上述三个文本框中的任何一个为空，那么用户将收到一条消息 - “必填字段”。我不想有单独的消息，因为它会破坏包括表单设计布局在内的设计。实现上述的脚本在这里：

function setuppagevalidationrecall() {

    $.validator.addMethod('example',

      function (value, element) {

              return ((value != "") && ($('#txtRef2').val() != "") && ($('#txtRef3').val() != ""));

          }, "Field is required");


    var validator = $("#form1").validate({
        rules: {
            txtRef1: {
                example: true,
                number: true,
                minlength: 3,
                maxlength: 3
            }

        }
    });

如何改进此功能以同时检查数字、最小长度和最大长度，以便对于上述所有三个文本框，我只收到一条消息作为 验证消息。并且还使示例方法像使用参数一样动态化，以便它可以应用于任何字段，如邮政编码（2 个文本框）、出生日期（3 个文本框，dd/mm/yyyy）

Answer 1

为多个控件显示单个验证消息是组的用途。

指定错误消息的分组。一个组由一个任意组名作为键和一个空格组成 元素名称的分隔列表作为值。使用 errorPlacement 来 控制群组消息的放置位置。

使用

groups:{ txtRef : "txtRef1 txtRef2 txtRef3" }

和

errorPlacement: function (error, element) {
                if (element.attr("name") == "txtRef1"
             || element.attr("name") == "txtRef2"
             || element.attr("name") == "txtRef3")
                    error.insertAfter("#txtRef3");
                else
                    error.insertAfter(element);
    }, 

在这里试试：

http://jsfiddle.net/uZYMr/2/

Answer 2

可以通过正确使用来自jquery.validate 的invalidHandler 和errorPlacement 来处理您尝试做的事情，无需创建function 来仅存储一个全局错误消息，用于在一个表格。

我知道jquery.validate 有时会因为同时触发所有错误而很烦人，但我相信这会对您有所帮助。

看看这个例子：

http://jsfiddle.net/Lrvxk/

如您所见，没有自定义功能或棘手的事情可以让事情按您的意愿工作。

希望这会有所帮助:-)