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();} };
)
)
