Modal联合Form表单，用Modal底部按钮提交表单验证而不是用Form表单自带提交验证的方式

最新推荐文章于 2023-07-26 16:02:41 发布

77n

最新推荐文章于 2023-07-26 16:02:41 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： javascript react

本文链接：https://blog.csdn.net/m0_46313328/article/details/120154079

版权

本文介绍了如何在React应用中，利用Modal组件的底部按钮来触发并完成表单验证，而非依赖Form自带的提交验证。关键步骤包括将提交按钮添加到Modal的footer属性，并采用异步方式调用validateFields方法来获取验证后的表单值。

摘要由CSDN通过智能技术生成

①将表单提交按钮设置给Modal底部footer属性

 <Modal title="新增" visible={
   isModalVisible} onCancel={
   handleCancel} centered={
   true} mask={
   true}
    footer={

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

77n

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

10-15

在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...

Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单，使用 Laravel 验证.zip

09-18

Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单，使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...

参与评论您还未登录，请先登录后发表或查看评论

angular表单验证及提交功能实现

Sophie_U的博客

02-01

4462

本例通过Angular框架来实现简单的表单验证一、html结构 1、借助于bootstrap快速的编写了一个简单的表单代码主要部分如下： <div class="container" style="margin-top: 30px;" ng-controller="myCtrl"> <h1 style="text-align: center">用户表单提交</h1> <

react、ant(版本4)，使用modal嵌套form表单，使用modal底部的确定按钮提交form表单

zhongmei121的专栏

01-30

1351

react+ant+ts+umi3，使用modal嵌套form表单，使用modal底部的确定按钮提交form表单

antd-design的modal结合form表单传值

liulang68的博客

10-20

1091

【代码】antd-design的modal结合form表单传值。

使用ant design的modal中嵌入form表单,动态获取数据

热门推荐

weixin_34348174的博客

09-20

1万+

最近在做一个公司的项目，使用的是react然后用了ant design，在做一个功能的时候使用了modal,modal里面还嵌套了一个子组件，就想子组件里的id能动态获取然后从接口拉数据，但是始终不行因为componentWillMount这个只进去的时候会渲染，后面就不会了。折腾了大半天也上了相关论坛，什么onRef 呀，或者直接带事件...

FormValidation的使用（简单验证）

其疾如风，其徐如林，侵掠如火，不动如山

07-20

6340

- 官方地址 https://formvalidation.io/ 貌似要钱，不过在天朝。。。 - 使用方法：引入 JS CSS 本地化文件JS <html> <head> <link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css">...

react antd From 表单提交（用modal对话的按钮提交from表单每一项）

我只是个很菜的前端

02-10

1615

react antd From 表单提交（用modal对话的按钮提交from表单每一项）

解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

01-18

<Modal title=减免天数 visible={that.state.visible} xss=removed xss=removed> <Form horizontal form={form}> <FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }

yii2 modal弹窗之ActiveForm ajax表单异步验证

10-22

在Yii2框架中，实现ActiveForm的ajax表单异步验证，主要涉及的技术点包括：ActiveForm组件、ajax验证、modal弹窗、以及客户端和服务端的数据交互。本文将针对这些知识点进行详细解读。 ### 一、ActiveForm组件在...

iview的Modal对话框与表单验证冲突解决

前端开发

08-02

8275

在iview的modal中，弹出的对话框在点击确定按钮后会立刻关闭当前的对话框，在正常使用这一逻辑是没有问题的，但是如果modal中包括表单验证，或者其他需要自定义关闭当前对话框的操作时就会变得捉襟见肘。因此，实现对话框的异步关闭是必须要实现的。然而通过对iview官方文档的阅读，modal中提供的实现异步关闭的loading属性在使用后虽然对话框仍然处于显示状态，但确定按钮始终处于加载...

iview 的modal内form表单校验的坑

晨曦的博客

10-08

4464

在开发iview-admin时，在modal内进行表单校验，发现一个问题，因为新增和编辑modal是共用一个modal，在点击编辑，打开modal进行校验没有问题，之后关闭modal，在点击新增按钮，然后发现明明没有还没有输入数据，但上次的校验提示还留在modal上，这真是非常糟糕的体验我通过查找找到了一个解决方法表单重置（this.$refs.formData.resetFields()）可...

表单 ajax 三种返回,javascprit form表单提交前验证以及ajax返回json

weixin_32896083的博客

08-06

464

1.今天要做一个手机验证码验证的功能。需求是前端页面点击发送短信验证码，后台接收后通过ajax返回到前端，之后前端在提交时候进行验证。思路很简单，不过做的过程还是学到不少的东西、1.ajax请求后返回原因是我后台返回的时候没有加上：@ResponseBody注解。加上后返回的数据是json字符串，但是js只能操作json对象。需要把json字符串转为json对象。一般的有三种方式1.JSON.p...

antd Modal中表单验证

最新发布

zhuang0911的博客

07-26

584

在Ant Design的Modal组件中，onOk属性是一个点击确定按钮后的回调函数。在使用Modal组件时，可以通过定义onOk属性来指定点击确定按钮后的操作。在给Modal组件传递onOk属性时，可以传递一个函数作为参数，该函数将在点击确定按钮后被调用。在给Modal组件传递onOk属性时，可以使用箭头函数或普通函数来定义回调函数。场景：实现一个点击Modal确认按钮进行表单校验，按钮显示加载图标，校验成功提交信息，校验不成功，Modal不关闭，进行表单错误提示。问题：Modal在点击确认后关闭。

antd pro 项目Modal中嵌套Form表单,触发表单验证并获取表单提交的数据

Mine____的博客

06-03

6579

antd pro项目中遇到弹框嵌套表单的需求,并获取其中的数据, 在官方提供的Form表单API中有一个出发表单验证的方法validateFields 触发表单验证 类型: (nameList?: NamePath[]) => Promise 如下为项目中使用 //此为Modal点击确定以后的回调 const okHandle = async () => { const fieldsValue = await form.validateFields(); //fieldsVa.

动态form无法验证问题。在弹出层的情况下同样可以验证

做得最大的项目，就是人生

06-06

668

@using NewMoon.Models.AncientCity; @model NewMoon.Models.AncientCity.AncientCityBasicInfoVM @{ ViewBag.Title = "BasicInfo"; Layout = "~/Views/Shared/_BasicLayout.cshtml"; }

antd(4.x)Modal结合form的复合使用

zw686668的博客

07-01

1453

antd(4.x)Modal结合form的复合使用效果展示：保留Modal的底部按钮实现功能：通过Modal自带的onOk和onCancel来受控Form表单的校验 required时onOk校验必传输入框创建时props传Modal-title并清空输入框编辑时props传Modal-title并传入初始值代码实现： modal+form（antd4modal+form只能以函数形式呈现） export interface ITagModal { tagVis: boolea

python测试开发django-183.bootstrap-formvalidation重置校验的方法

qq_27371025的博客

01-01

237

前言 form表单提交之前，需先校验数据合法性，当连续提交时，重置了form表单，校验方法也需要跟着重置遇到问题参考前面一篇https://www.cnblogs.com/yoyoketang/p/15745166.html,重置表单后，表单校验并没有重置 formvalidation校验表单校验器 // 表单校验器 function validate_model_form(id){ $(id).formValidation({ message : 'This value

antd Modal 里面嵌套form 表单赋值问题

weixin_45035410的博客

07-10

3384

点击编辑弹出modal 模态框，为 FormItem赋值 initialValue，当点击下一条表格的编辑时， FormItem内的值始终不变，不能动态改变。原因：当我们第一次点开Modal的时候， FormItem会得到一个initialValue,但是这个值只在组件挂载的时候执行了一次，当我们再次打开Modal窗口的时候并不会更新。解决方法: 当我们利用editVisible 控制modal的显示隐藏时 { editVisible && <

BootstrapValidator modal表单的校验、清除与重置实例

总结来说，本文提供了在 Bootstrap 的 modal 中使用 BootstrapValidator 进行表单验证、清除和重置的步骤，包括引入 CSS 和 JS 文件、配置验证规则、绑定表单提交和清除按钮的事件等，确保了用户输入数据的有效性和...