首页 > 其他 > 详细

element-ui 表单验证是否选择了图片

时间:2020-01-06 14:54:41      阅读:282      评论:0      收藏:0      [点我收藏+]

效果图

技术分享图片

 

 

 

html部分

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size=mini label-width="100px" class="demo-ruleForm">
       <el-form-item label="转盘图片" class="box-integral" prop=imageUrl>
            <el-upload
                class="avatar-uploader"
                :action="URL+‘/api/post/file‘" //服务器地址
                :data="date"   //需要带的参数
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="imageUrlerror"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <label style="position: relative;left: 6px;">(建议大小320*320px)</label>
        </el-form-item>
</el-form>

data部分

data(){
  return{
    date:{
      token:‘‘
      },
    ruleForm"{
      imageUrl:‘‘
},
    rules:{
      imageUrl:[{requird:true,message:‘请选择转盘图片‘,trigger:‘change‘}]  
}
}
}

js部分

//会验证整个表单
// this.$refs.ruleForm.validate(valid => {})
//改为不验证整个表单而是验证指定表单
this.$refs.ruleForm.validateField(imageUrl)

element-ui 表单验证是否选择了图片

原文:https://www.cnblogs.com/tlfe/p/12156135.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!