iview 的modal内form表单校验的坑

最新推荐文章于 2023-07-27 15:09:55 发布
最新推荐文章于 2023-07-27 15:09:55 发布
阅读量4.4k 收藏 1
点赞数 2
分类专栏： vue iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_24713805/article/details/102388723
版权
vue 同时被 2 个专栏收录
45 篇文章 0 订阅
订阅专栏
iview
15 篇文章 0 订阅
订阅专栏

在开发iview-admin时，在modal内进行表单校验，发现一个问题，因为新增和编辑modal是共用一个modal，在点击编辑，打开modal进行校验没有问题，之后关闭modal，在点击新增按钮，然后发现明明没有还没有输入数据，但上次的校验提示还留在modal上，这真是非常糟糕的体验

我通过查找找到了一个解决方法表单重置（this.$refs.formData.resetFields()）可以清除校验，在点击确认和取消按钮的方法内添加这个方法，但经过一段时间的使用，发现这玩意儿不太好使。。。。/(ㄒoㄒ)/~~

后来我看到下源码发现modal并不是真正的被移除，所以我就想起v-if这东西，我把它加在modal里面form上面，对应modal的v-modal上

天空之枫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Modal联合Form表单，用Modal底部按钮提交表单验证而不是用Form表单自带提交验证的方式
m0_46313328的博客
09-07 1256
①将表单提交按钮设置给Modal底部footer属性 <Modal title="新增" visible={isModalVisible} onCancel={handleCancel} centered={true} mask={true} footer={ <Form.Item> <Button type="primary" htmlType="submit" onClick={onFinish}> 提交 &
iview组件库表单验证踩坑
qq_43806488的博客
08-18 145
今天再用iview组件库做表单验证的时候踩了个大坑 表单输入框绑定的字段名 和 验证对象的字段名必须一样否则会出现 验证信息 即便有值也会一直触发
iview+vue.js之Modal里使用Form进行表单验证
tjy1214的博客
09-19 856
iview+vue.js之Modal里使用Form进行表单验证 踩坑1：点击确认按钮Modal框自动关闭，即使在@on-ok的方法里将v-model中的变量设为true也阻止不了。尝试过给Modal添加属性loading后，点击确定按钮对话框不会自动消失，但终究觉得不太妥。 解决：使用slot自定义底部按钮 <div slot="footer"> <Button t...
iview的modal中的form验证出错，页面不关闭的方法
jjw_zyfx的博客
12-18 681
效果如下： 代码如下： <Modal v-model="configModal" :title="configTitle" :mask-closable="false" :styles="{ width: '500px'}" class-name="vertical-center-modal" ...
iview中Modal和Form表单的组合使用-遇坑问题
weixin_47102346的博客
08-31 1260
需求： 点击一个button按钮弹出一个Modal对话框，再点击确定按钮提交表单，如果Form表单按要求填写则提交成功，关闭Modal对话框，否则提示“按要求填写表单”，Modal对话框不关闭，直至提交表单成功，或点击取消按钮 解决方法： 在iview中，Modal对话框点击取消，或确定按钮都会默认关闭对话框，可以用loading属性设置点击对话框不关闭Modal对话框，但确定按钮会一直处在加载状态，很不友好，我使用的方法是点击确定按钮是把loading设置为false,然后再设置会true <
iview form清除校验状态的实现
10-16
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
iview同时验证多个表单问题总结
10-17
主要介绍了iview同时验证多个表单问题总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
在使用iView的Modal组件时，如果Modal内包含需要响应数据变化的复杂组件，如图表，推荐使用`v-if`而非`v-show`来控制显示状态。这是因为`v-if`会触发组件的重新编译，确保子组件在Modal显示时能够获取到最新的数据。...
使用ant design的modal中嵌入form表单,动态获取数据
热门推荐
weixin_34348174的博客
09-20 1万+
最近在做一个公司的项目，使用的是react然后用了ant design，在做一个功能的时候使用了modal,modal里面还嵌套了一个子组件，就想子组件里的id能动态获取然后从接口拉数据，但是始终不行因为componentWillMount这个只进去的时候会渲染，后面就不会了。折腾了大半天也上了相关论坛，什么onRef 呀，或者直接带事件...
vue+ivew model框 select校验遇到的问题
maxiaole_z的博客
07-27 572
第二步：删除：@on-ok="confirmCarryOver" @on-cancel="cancel" cancelText="关闭" okText="确认"类似的定义。4.注意： 2.如果select选择后，校验不消失添加：trigger: "change"多个：trigger: ['blur', 'change']单个： trigger: 'change'
iview 表单清空
meng16的博客
03-31 2147
<Modal v-model="modal.visible" :width="60" :title="modal.title" @on-visible-change="closeAdd" @on-ok="handleSubmit('ProjectEditForm')"> <Form :model="model" ...
记一次elementui el-form组件resetFields方案无法重置部分字段值的问题
全干攻城狮
09-24 6681
背景 今天在使用elementui时，出现了一个诡异的问题，编辑、新增功能公用的表单，绑定数据后，关闭模态框无法重置部分表单项的值，如下图所示： 点击编辑按钮，打开模态框如下图： 关闭编辑模态框后，打开新增模态框，如下图（图中资源路径字段并未被重置）： 问题排查 是否el-form-item缺失了prop字段？ 表单绑定的值是否与data中定义的变量不一致？ 是否因为缺少了$nextTi...
iView Table组件中，修改弹窗后新建弹窗表单不清空的问题
BloodyManicure的博客
05-29 265
解决方法：保存时使用this.$set(data, index, JSON.parse(JSON.stringify(this.formInline)))触发bug原因：保存时直接将引用交给了table的data，打开新增弹窗时这个引用被置空，影响了行数据；解决方法：将编辑的打开Modal时间和新增的打开Modal事件全部写在this.$nextTick中；1. 新增后什么都没做直接触发了表单校验，所有校验项全部爆红，影响体验；2. 点击编辑后确认，再次打开新增，刚才操作的行数据被清空；
Ant for Vue Modal 里的 Form 校验
weixin_44088274的博客
06-09 990
Ant for Vue Modal 里的 Form 校验，及可能存在的问题 这是可能有一个需求是编辑功能，当我们直接给表单赋值时用 value 或 v-modal 会报下面的错误 这时我们需要换种方式给表单赋值，用 form 的 api setFieldsValue 方法，代码实现如下 还有一种情况，如果 handleUpdate 方法需要使用异步的时候 async.........
react+antd组件 modal里面包裹使用form表单并获取提交事件
weixin_43207103的博客
08-31 5463
1 先上图 我这里是点击“修改密码”那个按钮，然后跳到了modal框。（大家这里可以随便写一个按钮，然后给他一个点击事件让他可以显示modal框就好了，我这里着重讲解标题的内容） 2 贴代码 const [visible, setVisible] = useState(false);//antd 控制modal是否显示 const showMoal=()=>{ // console.log("showMoal") setVisible(true); } const handle
【JQuery easyui】 $.modalDialog 内嵌的页面form表单发起ajax请求处理
朝阳大司马
02-08 6196
昨天下午某项目遇到一个问题，modalDialog内嵌的页面使用form表单发起ajax请求，原来的代码是在$.modalDialog组件设置一个提交按钮，但是奇怪的问题现象是，后台返回的响应json却接收不到，于是我就想到了，由于是内嵌的页面发起form表单请求，响应应该返回到该内嵌页面才能够做处理，于是就研究了很长时间，最终问题解决。   先来看下原来的代码： var dialog = $....
Modal获取Form数据简单demo
nino617的博客
11-12 3160
Modal获取Form数据简单demo前言一、效果展示二、完整代码及概念总结1.完整代码2.细节分析及概念总结2.1. React.createRef()2.2. React中this指向及绑定问题bind()构造函数内绑定箭头函数2.3.Form提交时怎样与Modal的确定按钮关联footer2.4. 使用Form的validateFields()的两种写法 前言 使用react+antd+umi新建modal内嵌表单demo。 一、效果展示 完成效果如下图，点击Open Modal，弹出Modal框，
vue 提示框modal_vue iview modal弹出框 form表单验证
weixin_39927378的博客
12-20 360
_createApply(name){this.$refs[name].validate((valid) => {if (valid) {let addApply = Object.assign({},this.addApply)addApply.serviceEndDate = formatDate(new Date(addApply.serviceEndDate),'yyyy-MM-dd...
vue iview modal弹出框 form表单验证
weixin_30606669的博客
06-04 2374
一、ref="addApply" :model="addApply" :rules="ruleValidate" 不要忘记prop 二、规则 三、 _createApply(name){ this.$refs[name].validate((valid) => { if...
iview 表格内表单校验
最新发布
09-06
在scopedSlots中，我们可以使用iview提供的FormItem组件来实现表单校验功能。 具体实现步骤如下： 1. 在表格的columns属性中，为需要校验的列设置scopedSlots属性，并在scopedSlots中使用FormItem组件包裹需要校验...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值