el-form的整体校验---动态调用校验规则

el-form的整体校验—动态调用校验规则

一、重点: 计算属性computed

二、分析：

1、页面相关代码块 （重点 :rules=“rulesList”）

 <el-form :model="ruleForm" ref="ruleForm" :rules="rulesList" label-width="140px" class="demo-ruleForm">
     <el-form-item label="身份证正反面" prop="idCardPhotos" ref="shencard1">
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-success="handleAvatarSuccess1"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="2"
                            name='url'
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                            list-type="picture"
                            
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="营业执照图" prop="businessLicensePhotos" ref="zhizhao1"> 
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-success="handleAvatarSuccess2"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="2"
                            name='url'
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                            list-type="picture"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="授权书" prop="authorization"> 
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-success="handleAvatarSuccess3"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="2"
                            name='url'
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                            list-type="text"
                            style="border:none"
                            
                        >
                            <el-button size="small" type="primary" style="display:inline-block">点击上传</el-button>&nbsp;&nbsp;&nbsp;
                             <div style="display:inline-block;color:#606266;font-size:12px">(经办人不是法人时需提供此项资料)</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="域名证书" prop="domainCertificate">
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-success="handleAvatarSuccess4"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="2"
                            name='url'
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                            list-type="text"
                            
                        >
                    <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload> 
</el-form-item>
</el-form>
     
               

2、书写校验规则

	rules:{
                idCardPhotos: [{ required: true, message: "此项为必填项，请选择图片", trigger: "change" }],
                businessLicensePhotos: [{required: true, message: "此项为必填项，请选择图片", trigger: "change"}],
                
                // domainCertificate:[{ required: true, message: "此项为必填项，请选择文件", trigger: "change"}]
            },
     rules2:{
                idCardPhotos: [{ required: true, message: "此项为必填项，请选择图片", trigger: "change" }],
                businessLicensePhotos: [{required: true, message: "此项为必填项，请选择图片", trigger: "change"}],
                domainCertificate:[{ required: true, message: "此项为必填项，请选择文件", trigger: "change"}]
            }

3、计算属性computed，不同情况下，rules属性的值不同

computed:{
        rulesList:function() {
            if(parseInt(this.chanpinType2)== 1){
                return this.rules;
            }
            else if (parseInt(this.chanpinType2)== 2){
                return this.rules2;
            }
        }
       
    }

三、踩坑

问题：条件切换的时候，校验结果叠加

解决：有多个校验时，需要在合适的地方移除校验结果

//移除校验的方法封装	
getRefs(data) {
                data.map(item => {
                    this.$refs[item].clearValidate(); // 移除校验结果
                });
            }
                
//调用
 getRefs([shencard1,zhizhao1]);