el-form表单中的el-upload的文件表单验证
常规el-form中的表单验证：
el-form的el-form-item中：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item>... </el-form>在el-form中用model绑定ruleForm表单，里面存有所有表头数据，如：
ruleForm: {name: '',region: '',... },rules绑定的是rules，是表单校验的规则，如：
rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],... }ruleForm绑定的是el-form表单，便于之后的表单校验
submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}}); }validate：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
文件上传的表单验证：
遇到的问题：比如想要对上传的文件进行表单验证，用到的是el-upload组件，想要在提交的时候，若上传的文件为空则会显示提示文案，若有上传的文件则表单可正常提交。现在的问题是：文件上传后也会提示文案，提示我们文件未提交，但实际上文件已经上传了。
即：表单中的文件上传，在未选择文件之前，对表单进行校验，提示:文件未上传，需上传文件；选择文件上传，对表单进行校验，依旧提示:文件未上传，需上传文件
期望：在未选择文件之前，对表单进行校验，提示文件未上传，需上传文件；选择文件上传，对表单进行校验，应该通过校验
解决不了：
解决思路：
el-upload钩子：
on-change：文件状态改变时的钩子
on-remove：移除文件时的钩子
el-form的表单校验方法：
validateField：用于对部分表单字段进行表单校验
validate：表单校验（统一校验）
解决方法：
上传文件时
在el-upload的on-change钩子函数中保存上传的文件
调用el-form的validateField函数对el-upload的prop字段进行校验
移除文件时
在el-upload的on-remove钩子函数中更新文件列表
调用el-form的validateField函数对el-upload绑定的prop字段进行校验
正确方法：
给文件上传的字段的表单校验设置为自定义校验，就可以了！
returnWorkNotice: [{ validator: validateReturnWorkNotice, trigger: 'blur' }]let validateReturnWorkNotice = (rule, value, callback) => {// console.log('this.tabledata1.returnWorkNotice', this.tabledata1.returnWorkNotice);if (!this.tabledata1.returnWorkNotice || this.tabledata1.returnWorkNotice.length === 0) {callback(new Error('附件不能为空'));} else {callback();} };
)
)
