在项目中，经常遇到表单有上传图片、文件的情况，但是这些不经过v-model控制。所以对于表单校验就不能直接通过element自带的校验处理。这里就有个问题，我又要校验其他表单内容，又要特殊处理不是表单元素的内容校验。尝试过
clearValidate但是处理起来还是有点问题。后来发现Form-Item一个属性error,可以在你需要校验的时候添加校验提示，不需要的时候清空，就可以满足我的业务需求
例：校验上传图片为必填项
image.png
<el-form ref="ruleForm" size="mini" :rules="rules" :model="form" label-width="170px">
<!-- ....一些表单元素 -->
<el-form-item ref="ruleImg" label="车型图片：" required :error="carImgError">
<el-upload
ref="imgUpload"
:action="uploadUrl"
accept="image/*"
list-type="picture"
:before-upload="handleBefore"
:on-remove="handleRemove"
:on-success="handleSuccess"
:file-list="fileList"
>
<el-button icon="iconfont icon-upload">图片上传</el-button>
<span slot="tip" class="el-upload__tip ml">请上传jpg/png格式的图片</span>
</el-upload>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
uploadUrl: window.global_config.uploadURL,
carImgError: '', // 关键 表单内上传组件校验提示
rules: {
// 一些表单校验
},
fileList: [{ name: '默认车型图片', url: 'https://upload-images.jianshu.io/upload_images/18912919-2dd7184b2309af4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'}],
form: {}
},
methods: {
getForm() {
this.form.address = this.fileList[0] && this.fileList[0].url || ''
if (!this.form.address) this.carImgError = '请上传车型图片' // 关键
this.$refs.ruleForm.validate().then(() => {
if (this.form.address) {
// 表单上传接口
} else {
return false
}
})
},
// 图片移除
handleRemove(file, fileList) {
this.fileList = []
},
handleBefore(file) {
const isJPG = (file.type === 'image/png' || file.type === 'image/jpeg')
if (!isJPG) {
this.$message.error('请上传jpg/png格式的图片')
}
return isJPG
},
// 图片上传成功
handleSuccess(response, file, fileList) {
this.$message.success('图片上传成功')
// 关键 清空提示
this.carImgError = ''
//此处我只上传一张图片 再次上传更换原来的图片
this.fileList = [{ name: file.name, url: response.data }]
}
}
}
</script>
总结：1、 在表单提交时，同时进行表单校验（rules内定义的校验）、上传组件是否有文件（判断是否有图片地址）。表单校验成功后校验值是否存在，如果存在进行提交，不存在不做处理。（表单校验和上传组件需要同时校验，防止只提示一个校验错误信息，所以在表单校验成功后还需判断图片值是否存在，或者判断
carImgError是否为空）
2、在图片上传成功后，需要清空校验错误信息，（最好在图片移除的时候加上错误信息this.carImgError = '请上传车型图片',但是我懒）
结束
