element表单校验不生效问题

element表单校验不生效问题

根据我所遇到的问题情况,主要分两种,请遇到相同情况的同学,自己对号入座一波!!

1.第一种是直接没反应,直接就不触发错误提示类。

这种一般就是数据绑定的名称没有对应,以下是需要对应的位置,请自行参照。

html

在这里插入图片描述

js 中data

在这里插入图片描述

第二种就是名称都对应上了,也修改了绑定的值,但是错误提示就是不消失问题。

就类似如如下这种情况:

在这里插入图片描述

如图所示我的图片已经显示成功了,但是错误提示还是没有消失,但是在保存校验的时候是没有问题的,所以初步判断为,表单校验方法没有触发。

所以我定义了自定义校验方法,并进行了打印,当改变所绑定的值的时候,理因触发自定义方法,但是现实是没有触发。

经过很久的实验 ,我终于get到了问题所在。

<el-form-item label="封面图" prop="logo">
            <!-- 通过v-model绑定不然值改变不触发校验 -->
            <!-- <el-input v-show="false" type="text" v-model="ruleForm.logo" name="" id=""></el-input> -->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="imgchange"
            >
              <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">上传16:9比例的视频封面图</div>
            </el-upload>
          </el-form-item>

如上方代码所示,必须通过v-model绑定你改变的值才行,直接赋值不会触发表单校验,当然必须得用element得输入框组件绑定才行哦,用原生的input输入框绑定也是不行的哦!

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值