【vue】 element upload文件上传后表单校验信息还存在

简介: 【vue】 element upload文件上传后表单校验信息还存在

解决方案一:通过增加el-checkbox-group

<el-form-item label="底图文件" prop="underlayFile">
  <!-- 解决文件上传后校验信息还存在的问题 -->
  <!-- 注意修改绑定的模型数据 -->
  <el-checkbox-group v-show="false" v-model="reproductionForm.underlayFile">
  </el-checkbox-group>
  <upload-file ref="uploadFileRef" @getFile="getFile"></upload-file>
</el-form-item>

解决方案二:自定义校验

data(){
    // 自定义验证
  let validateImage = (rule, value, callback) => { //验证器
      if (!this.checkImgSuccess) {     //为true代表图片在  false报错
          callback(new Error('请上传图片'));
      } else {
          callback();
      }
  };
  return{
  // 模型数据
  }
}

在表单的校验规则中加入自定义的校验

rules: {
     coverImg: [{required: true, validator: validateImage, trigger: 'change'}],
},
目录
相关文章
|
2天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
17 1
|
2天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
14 0
|
2天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
10 0
|
2天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改
ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改
|
2天前
|
JavaScript
通过使用online表单的获取使用,了解vue.js数组的常用操作
通过使用online表单的获取使用,了解vue.js数组的常用操作
|
2天前
|
JavaScript
vue生成动态表单
vue生成动态表单
10 0
|
2天前
|
JavaScript
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
7 0
|
2天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
18 7
|
2天前
|
JavaScript 前端开发 安全
表单处理:使用 Vue 进行表单验证和提交
【4月更文挑战第22天】Vue 提供了便捷的表单组件和验证规则,支持实时用户输入验证和错误消息显示,确保数据正确性。通过封装验证逻辑和处理异步验证,增强代码复用和安全性。同时,关注用户体验,如清晰的指示和错误反馈,防止 CSRF 攻击,实现高效、安全的表单处理。
|
1天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了