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

最新推荐文章于 2025-06-13 16:19:19 发布

倾666

最新推荐文章于 2025-06-13 16:19:19 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44817062/article/details/118527681

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何实现el-form的动态校验规则，通过计算属性computed根据条件切换不同的验证规则。在切换过程中遇到的问题是校验结果会叠加，解决方案是通过清除校验结果的方法来确保每次校验都是独立的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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]);