首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

代码语言:javascript
复制
$(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选项。例如,我们可以将第一个提交按钮与第一组验证规则关联,将第二个提交按钮与第二组验证规则关联。以下是一个示例代码:

代码语言:javascript
复制
$(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选项定义了两个验证组,分别是group1group2group1包含input1输入框的验证规则,而group2包含input2输入框的验证规则。

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

代码语言:html
复制
<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验证的多个提交按钮,并为每个按钮分配不同的验证组。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

web前端之锋利jQuery八:jQuery插件使用(表单验证表单提交

1.jQuery表单验证插件-Validation: 最常使用JavaScript场合就是表单验证,而jQuery作为一个优秀JavaScript库,也提供了一个优秀表单验证插件-Validation...自定义验证规则:可以很方便地自定义验证规则 简单强大验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息功能 实时验证:可以通过keyup和blur事件触发验证,而不仅仅在表单提交时候验证.../js/jquery.validate.js"> 确定哪个表要被验证 $(“#commentForm”).validate(); 针对不同字段,进行验证规则编码 class=”required.../js/jquery.validate.messages_cn.js"> 2.jQuery表单插件——Form: jQuery Form插件是一个优秀Ajax表单插件,可以非常容易...如果服务器返回一个成功状态,那么用户就会看到“提交成功!

6.6K50

ASP.NET Core 基础知识】--MVC框架--Views和Razor语法

五、Views中表单处理 5.1 HTML表单基础 HTML表单是一种用于收集用户输入元素,它允许用户通过输入框、下拉菜单、单选按钮等方式向服务器提交数据。...5.3 表单验证和处理 在ASP.NET Core中,表单验证和处理是Web应用程序中关键部分。ASP.NET Core提供了内置模型验证和处理机制,可以方便地处理用户提交表单数据。...("Success"); } // 模型验证失败,返回登录页面,并显示错误信息 return View(model); } 模型验证表单提交时,模型验证会自动执行。...这是一个基本表单验证和处理例子。根据实际需求,可以进一步扩展和定制验证规则、错误消息以及处理逻辑。 ASP.NET Core模型验证和处理机制非常强大,可以满足各种复杂验证需求。...-- 引入CDNjQuery库 --> <!

22220

JQuery扩展插件Validate—6radio、checkbox、select验证

radio、checkbox、select验证其实方法与前面提到没有太大区别,但问题是错误信息会显示在同一一个元素后面,效果如下所示: 解决这个问题办法是将错误信息指定到一个特定位置,...validate()方法参数中可以进行自定义,示例代码如下: View Code         jQuery.validator.addMethod...error.insertAfter(element);                  }             },             debug: false,  //如果修改为true则表单不会提交...; submitHandler: function() {}将会在表单提交到服务器前执行一些操作;用remote可以进行Ajax验证,好像有个小bug;在使用ASP.NET与validate组合使用时会有一些问题可以参考网友博文...1、在ASP.NET按钮都会解析成submit所有都会触发验证,如果想让某个按钮不触发验证可以加上这个样式:class="cancel" 源码下载

97020

ASP.NET MVC客户端验证jQuery验证

我们就以验证为例,一个Web页面中具有一个表单,我们需要 对针对表单中三个文本框(foo、bar和baz)输入进行验证。...二、以内联方式指定验证规则 jQuery验证实际是对存在于表单输入元素进行验证,它支持一种内联(Inline)编程方式是我们可以直接将验证规则直接编写在被验证输入HTML元素class(表示...整个HTML文件主体部分是一个表单,我们可以通过其中文本框输入一些个人信息(姓名、出生日期、Blog地址和Email地址),最后点击“保存”按钮对输入数据进行提交。...,一个用于提交个人信息页面会被呈现出来。...ASP.NET MVC客户端验证jQuery验证 ASP.NET MVC客户端验证jQuery验证在Model验证实现 ASP.NET MVC客户端验证:自定义验证

8.2K90

ASP.Net MVC开发基础学习笔记:四、校验、AJAX与过滤器

DataAnnotations 允许我们描述希望应用在模型属性验证规则,ASP.NET MVC 将会使用这些 DataAnnotations ,然后将适当验证信息返回给用户。   ...")内,并阻止此次表单提交操作。...二、ASP.Net MVC下两种AJAX方式 2.1 使用JQuery AJAX方式   首先,在ASP.Net MVC中使用此种方式跟普通WebForm开发方式是一致,需要注意是:Url地址不同...例如,我们在一个View中添加一个按钮,用于使用AJAX获取一个服务器端时间: JQuery Ajax方式 <input id="btnJQuery" type="button" value...这里是POST方式;   Confirm代表点击提交按钮后提出的确认对话框,并给出用户给定提示语,这里是:您确定要提交

2.1K20

如何解决jQuery Validation针对动态添加表单无法工作问题?

为了充分利用ASP.NET MVC在服务端呈现HTML能力,在《利用动态注入HTML方式来设计复杂页面》一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案。...我们知道ASP.NET MVC默认集成了jQuery Validation,但是对于通过JavaScript动态添加表单,客户端验证默认情况下是失效。...还是以前文涉及“联系人管理”为例,在一个ASP.NET MVC应用中定义了如下两个类型,Contact封装联系人信息,HomeController包含三个Action,除了默认Index外,两个Update...Action方法Update对应View(Update.cshtml)定义,这是一个Model类型为Contact强类型View,指定联系人信息以编辑状态呈现在一个表单中: 1: @model...,运行程序后点击Save按钮提交表单后,输入数据并不会被验证(客户端验证)。

1.9K90

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是客户端表单验证插件。...Query formValidator表单校验插件支持验证功能(还有很多功能没有罗列)罗列如下: 支持所有类型客户端控件校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。...第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) 支持多个校验。...如果一个页面有多个提交按钮,分别做不同提交提交前要做不同校验,所以你得用到校验功能。 支持4种状态信息提示功能,可以灵活控制4种状态是否显示。...)、ajaxValidator(通过ajax到服务器做 数据校验)、regexValidator(提供可扩展正则表达式库) 、functionValidator (提供可扩展函数库来做校验) 你可以有两种方法快速开始

2.4K90

Asp.Net MVC4入门指南(8):给数据模型添加校验器

DataAnnotations 提供了一内置验证特性,您可以以声明方式,应用于任何类或属性。 更新Movie类,以利用内置Required、 StringLength和Range验证属性。...您可能已经注意到了Title 和Genre属性,在字段中输入文本或者删除文本,是不会执行所需验证属性,直到您提交表单 (点Create按钮)时才执行。...上面的顺序将触发必需验证,而并不需要点击提交按钮。在不输入任何字段情况下,直接点击提交按钮,将触发客户端验证。直到没有客户端验证错误情况下,表单数据才会发送到服务器。...如果您想要在后面更改验证逻辑,您可以做在一个地方,将验证信息添加到模型。 (此示例中,是movie 类)。...您不必担心不符合规则 ,验证逻辑会在应用程序不同部分执行——在一个地方定义验证逻辑将会被使用到各个地方。这使代码非常干净,并使它易于维护和扩展。它意味着您会完全遵守DRY原则。

4.6K100

ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证

对于自定义验证,我们也只需要定义相应Validation就可以了,不过服务端验证比较简单,而客户端验证就要稍微复杂一些,本文提供一个简单实例说明在ASP.NET MVC中实现自定义验证基本步骤。...由于ASP.NET MVC采用JQuery Validation进行客户端验证,我们可以通过如下这段javascript来注册用于实现客户端验证function和添加相应adapter。...在通过VSASP.NET MVC项目模板创建空Web应用中,我们定义了如下一个简单Person类型,我们定义AgeRangeAttribute 应用到了表示出生日期BirthDate,并将允许年龄...View定义,我们直接调用HtmlHelper扩展方法EditorModel将作为ModelPerson对象以编辑模式呈现在一个表单中。...,输入不合法出生日期并点击”Save”按钮提交表单(针对第一次客户端验证),客户端验证将会生效,具体效果如下图所示。

3.8K50

Asp.NetCore Web开发之输入验证

在开发中,验证表单数据是很重要一环,如果对用户输入数据不加限制,那么当错误数据提交到后台后,轻则破坏数据有效性,重则会导致服务器瘫痪,这是很致命。...下面就来讲解一下它用法: 要使用这个框架,就要先引用框架包(注意:此包是基于Jquery开发,所以要先引用jquery.js),由于数据验证是必要,所以微软将其集成到了asp.net core...设置以后,我们可以通过$('#被验证formid').valid()这个方法查看验证结果,也就是true和false,以此来判断是否该提交表单。...以上就是该框架大体用法,但解释此用法不是本节主要目的,我们了解了它用法后,接下来介绍一个更简单用法:asp.net core输入验证,为了简化表单验证代码量,asp.net core 从后端出发...ModelState.Values就是代表一个个PersonData中属性值,这是外层循环,又因为,验证可能为多个,所以通过第二层循环遍历该属性所有的错误信息,现在来测试一下: 直接输入12,控制台打印结果如下

1.9K30

【Java 进阶篇】深入浅出:JQuery 事件绑定奇妙世界

事件绑定是指在特定 HTML 元素设置一个监听器,用于捕捉用户触发事件(比如点击、输入、鼠标移动等),并执行相应操作。在 JQuery 中,事件绑定通常使用 on 方法来完成。...这只是其中一小部分,实际 JQuery 提供了丰富事件类型,以满足不同场景需求。 事件处理函数 在 JQuery 中,事件处理函数是在事件被触发时执行函数。...通过 setTimeout 函数,我们在一定时间后再次将背景颜色还原,实现了点击时瞬间特效。 案例二:表单验证 表单验证是 Web 开发中常见需求之一。...event.preventDefault(); // 进行表单提交其他操作 alert("表单验证通过,可以提交!")...在表单提交时,通过 submit 事件阻止默认提交行为,执行其他操作(比如异步验证、数据提交等)。 结语:奇妙世界探索 通过本文学习,我们深入了解了 JQuery 事件绑定基本原理和用法。

15810

ASP.NET MVC 5 - 给数据模型添加校验器

ASP.NET MVC 验证错误UI 重新运行应用程序,浏览 /Movies URL。 单击Create New链接,来添加一部新电影。在窗体中填写一些无效值,然后单击Create按钮。...如同jQuery客户端验证来检测到错误时,它会显示一个错误消息。 ?...请注意,表单在每一个相应验证错误消息旁边,已经自动使用红色边框颜色突出显示文本框指明无效数据。...它们会自动查找模型中指定验证属性,并显示适当错误消息。 如果您想要在后面更改验证逻辑,您可以做在一个地方,将验证信息添加到模型。 (此示例中,是movie 类)。...您不必担心不符合规则 ,验证逻辑会在应用程序不同部分执行——在一个地方定义验证逻辑将会被使用到各个地方。这使代码非常干净,并使它易于维护和扩展。它意味着您会完全遵守DRY原则。

9K70

Git 项目推荐 | 基于 C# 极速 WEB + ORM 框架

NFine是一套基于ASP.NET MVC+EF6+Bootstrap开发出来框架,源代码完全开源,可以帮助你解决C#.NET项目68%重复工作,让开发人员远离加班!...内置一系列企业信息管理基础功能。 操作权限控制精密细致,对所有管理链接都进行权限验证,可控制到导航菜单、功能按钮。...数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段。 提高开发效率及质量。常用类封装,日志、缓存、验证、字典、文件、邮件、,Excel。...客户端验证jQuery Validation Plugin 1.9.0。 在线编辑器:ckeditor、simditor。 上传文件:Uploadify v3.2.1。...二 后端技术 核心框架:ASP.NET MVC5、WEB API。 持久层框架:EntityFramework 6.0。 定时计划任务:Quartz.Net组件。

3K80

ASP.NET Core 基础知识】--MVC框架--Models和数据绑定

return View(); } 这些例子展示了如何处理在ASP.NET Core MVC中进行复杂数据绑定,包括嵌套对象、集合和数组等不同类型数据结构。...通过在前端进行验证,用户能够更早地得知输入错误,而不是等到提交表单后才得知。 降低后期成本: 在开发阶段实施强大数据验证可以降低维护和修复错误成本。...即时反馈: 客户端验证允许即时反馈,使用户在提交表单之前就能看到可能错误信息。这有助于提高用户体验和减少用户填写无效数据可能性。...模型验证器通常是在模型属性应用验证特性,但有时你可能需要执行更复杂验证,例如涉及多个属性验证逻辑或依赖外部服务验证。... 在这个例子中: Index 动作方法包含两个版本,一个处理 GET 请求,返回一个用于提交表单页面;另一个处理 POST 请求,接收表单数据并执行相应逻辑。

31910

ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

表单常见于大多数业务应用程序里,因此统一样式有助于提高用户体验,Bootstrap提供了许多不同CSS样式来美化表单。...水平表单 使用ASP.NET MVCHTML.BeginForm可以方便创建一个表单,通过为添加名为form-horizontalclass来创建一个Bootstrap 水平显示表单...和class col-*后,显示效果如下: 内联表单 内联表单表示所有的form 元素一个接着一个水平排列,只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠...默认情况下ASP.NET MVC项目模板支持unobtrusive 验证并且会自动添加需要JavaScript库到项目里。...当一个input元素验证失败,JQuery validation插件会为元素添加input-validation-error class(存在Site.css中)。

3.7K40

ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素

Bootstrap Form(表单表单常见于大多数业务应用程序里,因此统一样式有助于提高用户体验,Bootstrap提供了许多不同CSS样式来美化表单。...水平表单 使用ASP.NET MVCHTML.BeginForm可以方便创建一个表单,通过为添加名为form-horizontalclass来创建一个Bootstrap 水平显示表单。...Bootstrap 验证样式 默认情况下ASP.NET MVC项目模板支持unobtrusive 验证并且会自动添加需要JavaScript库到项目里。...当一个input元素验证失败,JQuery validation插件会为元素添加input-validation-error class(存在Site.css中)。...ASP.NET MVC包含了若干编辑模板,当然我们也可以实现扩展。编辑模板类似于局部视图,不同是,局部视图通过name来渲染,而编辑模板通过类型来渲染。

6.1K80

ASP.NET MVC客户端验证jQuery验证在Model验证实现

在简单了解了Unobtrusive JavaScript形式验证jQuery编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证。...对于客户端验证ASP.NET MVC对jQuery验证插件进行了扩展,实现了另一种不同内联方式是我们 可以将验证规则定义在被验证输入元素属性中。...具体来说,去除“data-val-”前缀后属性名称对应着采用jQuery验证时对应验证规则名称。 一般来说,一个ValidationAttribute对应着一种验证类型和一系列可选验证参数。...二、客户端验证规则生成 ASP.NET MVC在利用jQuery进行客户端验证时候,虽然验证规则并没有采用其原生方式通过被验证元素class属性来提供,但是却可以通过“data-val-{rulename...ASP.NET MVC客户端验证jQuery验证 ASP.NET MVC客户端验证jQuery验证在Model验证实现 ASP.NET MVC客户端验证:自定义验证

7.1K70

bootstrapValidator 中文API

提交表单时也不会执行任何验证。当您要在自定义提交处理程序中提交表单时,可能会使用它。 破坏 destroy() - 破坏插件。 它将删除所有错误消息,反馈图标以及关闭插件创建事件。...参数 类型 描述 field 字符串| jQuery 字段名称或字段元素如果未定义字段,则该方法返回表单选项。 validator 串 验证名称如果未定义验证器,则该方法返回所有字段选项。...option 串 选项名称如果未定义,则该方法返回给定验证选项 getSubmitButton getSubmitButton(): jQuery - 返回显示点击提交按钮jQuery元素。...null如果没有点击提交按钮返回。 已验证 isValid(): Boolean- true如果所有表单域都有效,则返回。否则返回false。 调用这个之后,确保已经调用了validate方法。...当您想通过单击按钮或链接而不是提交按钮验证表单时,这很有用。

13.1K50
领券