关于使用el-form组件中上传文件组件的非空验证

最新推荐文章于 2024-08-12 17:50:55 发布
最新推荐文章于 2024-08-12 17:50:55 发布
阅读量1k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40639686/article/details/131052519
版权
文章讨论了在使用ElementUI的表单组件和上传文件组件时遇到的验证问题。当上传文件后，非空验证提示仍然显示，需要手动再次验证。作者提出了两种解决方案：一是参考ElementUI的el-form和el-upload的交互处理；二是利用form-item的change事件和组件间的provide/inject通信机制来监听并更新验证状态。
摘要由CSDN通过智能技术生成

场景如下

在表单组件中有上传文件组件，

用一个对象数组存储附件名称、路径等信息，

提交时候验证该数组是否为空，

出现的问题是：

非空验证激活后，上传文件，验证提示文字仍然存在；

需要再手动验证一次。

第一种方案参考如下

ElementUI中el-form验证el-upload上传的文件_码农阿焦的博客-CSDN博客

第二中方案如下

以下是element-ui源码内容：

form-item组件绑定了el.form.change,且这组件通过provide暴露出去了

 然后在诸如el-input这类组件中注入form-item，并在合适的实际触发el.form.change

 

因为是provide暴露的，我们在自己的代码中也可以访问，在需要的实际触发即可，

我这里是监听这个保存附件的列表变化

 源码中的dispatch应该是饿了么自己封装的触发器，不用管他

 

qq_40639686
关注
vue element-ui 表单校验如何 校验上传图片是否为空
weixin_43962877的博客
03-31 5911
<template> <div> <el-form ref="form" :rules='rules' :model="formsq" label-width="80px"> <el-form-item label="商品名称" prop="name"> &lt...
关于使用element-ui组件化el-cascader表单验证无法通过的解决
qq_51558433的博客
06-01 2395
在做项目的时候，多处要用到级联，所以就想着将他封装成单独的组件
element upload上传文件非空校验问题
lixinhua_man的博客
01-07 6578
element upload上传文件校验问题 我们在有些时候上传文件时需要一些非空校验，当然校验文件参数类型等等可以采用before-upload或者on-change、on-success一些方法检验， 原生的input type=“file” 采用监听change 进行基础校验 首先触发创建按钮，弹出提示 点击上传文件，但是提示依旧还在 我们这边 可以看到文件已经上传了，但是提示信息还是会存在，解决方案采用再次手动触发单个文件校验。 //最终解决方案，及相应方法 // 表单组件中嵌入upload
element upload 如何 上传提交文件不能为空校验、上传文件覆盖旧文件
最新发布
qq_53895518的博客
08-12 289
1、可以再其on-success挂载的函数执行判断fileList长度的方式来判断。2、也可以在接口的 then成功回调里调用。
vue 对表单中的上传upload组件非空校验（elementui）
qq_39187822的博客
11-25 4211
注意prop要绑定 <el-form ref="form" :model="form" :rules="rules" label-width="150px"> <el-form-item label="文件:" style="width: 300px" prop="fileList"> <el-upload v-model="form.fileList" align="left" drag class="upload-demo"
elemnt.ui中upload手动上传+非空判断
weixin_43753330的博客
07-15 2655
之前做的都是自动上传，通过上传成功的回调来判断，这次需求要手动上传，所以记录一下。 <template> <div> <el-upload class="upload-demo" ref="upload" :action="upload_url" :auto-upload="false" :before-upload="beforeAvatar...
element 判断附件上传是否为空
qq_53439433的博客
08-19 1417
新建一个隐藏的input 调用el-upload http-request方法后把附件赋值上去即可触发onchange事件来判断是否为空。将el-upload 与 input绑定同一字段
使用el-upload 上传图片组件，验证图片是否上传成功的两种方式。
qq_42797435的博客
10-28 2413
使用el-upload 上传图片组件，验证图片是否上传成功的两种方式。
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
qq_45532769的博客
10-29 4276
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
vue el-form 遇上 v-if，表单校验不生效问题
且听风吟的博客
08-18 8305
el-form遇上v-if，表单校验不生效问题
vue element table中自定义一些input的验证操作
10-15
在Vue Element UI框架中，`el-form`组件是用于创建表单的重要部分，它提供了强大的表单验证功能。本文将详细介绍如何在`el-form`与`el-table`结合使用时，自定义`input`的验证操作。 首先，`el-form`组件通过`:...
el-form表单组件中的文件校验
qq_44185357的博客
08-15 296
【代码】el-form表单组件中的文件校验。
el-form表单中的el-upload的文件表单验证
dayday_0724的博客
06-25 1017
解决使用element-ui的upload组件中文件表单验证问题
elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因
热门推荐
rudy_zhou的博客
06-08 1万+
elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因唠唠嗑如何进行验证的获取规则 源码处写法获取验证项 源码处写法上述使用中常见问题场景结语 唠唠嗑 用vue + elementUI 开发有些日子了，经常在使用el-form 组件时，时不时的出现验证没生效，或者生效了在验证函数中 value 是 undefined，也细细的读了elementUI 的文档。有些信息交代的比较模糊，最后还是看了elementUI 的源码才确认下来之前一直猜测的东西。 今天就专门分享一下，看el
element Form表单 校验el-upload上传组件
qq_43901960的博客
01-15 1210
element Form表单 校验el-upload上传组件
vue elementUI 上传非空验证
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
12-06 750
原理就是写一个假的红色*号，每次点击查看的时候执行 this.rules.staffImg[0].required = false;上传文件改变后执行this.rules.staffImg[0].required = false;图片上传成功后执行this.rules.staffImg[0].required = false;表单重置的时候执行this.rules.staffImg[0].required = true;关闭原有的非空验证，打开假的红色*号。
elementui中文件的上传和校验
qq_40765784的博客
10-09 1589
实现了在el-form中使用el-upload的文件添加和文件的非空校验，同时对el-upload的钩子进行了测试和介绍。
antd-vue/elementUi上传图片文件校验是否为空，解决不能直接使用 form-item validFeild校验、校验失败问题
qq_39532524的博客
02-23 1561
上传组件的value值或者文件值写成了form.xxx，这是正常的input的校验流程，当是上传文件的input时会发现校验失效了，上传了文件提示还在
el-form组件封装，其中组件中提交表单的按钮在父级使用
05-25
首先，你需要在`el-form`组件中添加一个`slot`，用于放置提交按钮： ```html <el-form ref="form" :model="form" :rules="rules"> <!-- 其他表单项 --> <slot name="submit"></slot> </el-form> ``` 然后，在父级组件中使用`template`模板语法，将提交按钮放置到`slot`中： ```html <template> <my-form> <el-button slot="submit" type="primary" @click="submitForm()">提交</el-button> </my-form> </template> ``` 这样，你就可以在父级组件中控制提交表单的按钮了。当点击提交按钮时，调用父级组件的`submitForm`方法，该方法中可以通过`$refs`获取子组件中的`el-form`实例，从而进行表单验证和提交操作： ```js export default { methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过，提交表单 this.$refs.form.submit() } else { // 表单验证失败 this.$message.error('表单验证失败') } }) } } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值