jQuery验证 - 一个asp.net表单上的多个提交按钮,不同的验证组？

在这个问答内容中，我们将讨论jQuery验证，这是一个流行的JavaScript库，用于处理客户端表单验证。在ASP.NET表单中，我们可以使用jQuery验证来验证多个提交按钮，并将它们分组以进行不同的验证。

首先，我们需要在ASP.NET项目中包含jQuery和jQuery验证插件。可以通过NuGet包管理器或手动下载并添加到项目中。

接下来，我们需要在JavaScript代码中初始化jQuery验证。以下是一个示例代码：

$(document).ready(function () {
    // 初始化验证
    $("#myForm").validate({
        // 验证规则
        rules: {
            input1: {
                required: true
            },
            input2: {
                required: true,
                email: true
            }
        },
        // 错误消息
        messages: {
            input1: {
                required: "请输入内容"
            },
            input2: {
                required: "请输入有效的电子邮件地址",
                email: "请输入有效的电子邮件地址"
            }
        },
        // 提交处理
        submitHandler: function (form) {
            // 在这里处理表单提交
            form.submit();
        }
    });
});

在上面的代码中，我们使用validate()方法初始化jQuery验证。我们可以在rules对象中定义验证规则，并在messages对象中定义错误消息。submitHandler函数将在表单验证通过时调用，我们可以在这里处理表单提交。

要将不同的验证组应用于不同的提交按钮，我们可以使用groups选项。例如，我们可以将第一个提交按钮与第一组验证规则关联，将第二个提交按钮与第二组验证规则关联。以下是一个示例代码：

$(document).ready(function () {
    // 初始化验证
    $("#myForm").validate({
        // 验证规则
        rules: {
            input1: {
                required: true
            },
            input2: {
                required: true,
                email: true
            }
        },
        // 错误消息
        messages: {
            input1: {
                required: "请输入内容"
            },
            input2: {
                required: "请输入有效的电子邮件地址",
                email: "请输入有效的电子邮件地址"
            }
        },
        // 验证组
        groups: {
            group1: "input1",
            group2: "input2"
        },
        // 提交处理
        submitHandler: function (form) {
            // 在这里处理表单提交
            form.submit();
        }
    });
});

在上面的代码中，我们使用groups选项定义了两个验证组，分别是group1和group2。group1包含input1输入框的验证规则，而group2包含input2输入框的验证规则。

最后，我们可以在ASP.NET表单中添加多个提交按钮，并为每个按钮指定一个不同的name属性。在JavaScript代码中，我们可以根据按钮的name属性来触发不同的验证组。以下是一个示例代码：

<form id="myForm">
   <input type="text" name="input1" />
   <input type="text" name="input2" />
   <button type="submit" name="button1">提交1</button>
   <button type="submit" name="button2">提交2</button>
</form><script>
    $(document).ready(function () {
        // 初始化验证
        $("#myForm").validate({
            // 验证规则
            rules: {
                input1: {
                    required: true
                },
                input2: {
                    required: true,
                    email: true
                }
            },
            // 错误消息
            messages: {
                input1: {
                    required: "请输入内容"
                },
                input2: {
                    required: "请输入有效的电子邮件地址",
                    email: "请输入有效的电子邮件地址"
                }
            },
            // 验证组
            groups: {
                group1: "input1",
                group2: "input2"
            },
            // 提交处理
            submitHandler: function (form) {
                // 在这里处理表单提交
                form.submit();
            }
        });

        // 为按钮1绑定点击事件
        $("button[name='button1']").click(function () {
            // 触发group1验证
            $("input[name='input1']").valid();
        });

        // 为按钮2绑定点击事件
        $("button[name='button2']").click(function () {
            // 触发group2验证
            $("input[name='input2']").valid();
        });
    });
</script>

在上面的代码中，我们为按钮1和按钮2分别绑定了点击事件。当点击按钮1时，我们使用valid()方法触发input1输入框的验证，并将其添加到group1验证组中。当点击按钮2时，我们使用valid()方法触发input2输入框的验证，并将其添加到group2验证组中。

这样，我们就可以根据不同的提交按钮来触发不同的验证组，从而实现在ASP.NET表单中使用jQuery验证的多个提交按钮，并为每个按钮分配不同的验证组。