el-form表单中的el-upload的文件表单验证

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组件，想要在提交的时候，若上传的文件为空则会显示提示文案，若有上传的文件则表单可正常提交。现在的问题是：文件上传后也会提示文案，提示我们文件未提交，但实际上文件已经上传了。

即：表单中的文件上传，在未选择文件之前，对表单进行校验，提示:文件未上传，需上传文件；选择文件上传，对表单进行校验，依旧提示:文件未上传，需上传文件

期望：在未选择文件之前，对表单进行校验，提示文件未上传，需上传文件；选择文件上传，对表单进行校验，应该通过校验

解决不了：

解决思路：

1. el-upload钩子：

   • on-change：文件状态改变时的钩子

   • on-remove：移除文件时的钩子

2. el-form的表单校验方法：

   • validateField：用于对部分表单字段进行表单校验

   • validate：表单校验（统一校验）

解决方法：

1. 上传文件时

   • 在el-upload的on-change钩子函数中保存上传的文件

   • 调用el-form的validateField函数对el-upload的prop字段进行校验

2. 移除文件时

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