element-ui 表单验证（解决了表单验证不生效的问题）vue有关elementui form表单rules验证问题，有值却仍然显示不通过

最新推荐文章于 2025-05-27 20:12:36 发布

Monop

最新推荐文章于 2025-05-27 20:12:36 发布

阅读量5k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_53251830/article/details/122552893

版权

当Element-UI的表单验证不生效时，问题可能出在rules参数与model绑定值不一致或路径错误。在遍历数组数据的表单情况下，确保el-form的:model与data对象对应，el-form-item的:prop应设置为'formData.'+index+'.value'，确保与data字段匹配。

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

一般有值，但是表单认证不通过，是因为设定的rules参数和model绑定的参数不一致，或者是地址部一直，这些需要注意的点查一下都有，就不赘述了。下面说说另外一中用法，:prop='formData.'+index+'.value'

遍历表单的情况下表单检验

对于数组数据如：

modelData:{
    id:'123',
    name:'用户数据',
    formData:[    //关键数据
        {   
            title:"姓名",
            paramName:"name",
            type:"text",
            null:false,  // 是否允许为空
            value:''
        },
        {   
            title:"学号",
            paramName:"No",
            type:"text",
            null:false,
            value:''
        },
        {   
            title:"班级",
            paramName:"classNum",
            type:"text",
            null:true,
            value:''
        },
    ]
}

//在methods里面通过遍历data数据 设置 infoRules 验证规则
this.modelData.formData.forEach(item=>{  
    let key = JSON.parse(JSON.stringify(item.paramName));
    if(item.null){
        this.infoRules[key] = [
            {
                required: true,
                message: "必填项！",
                trigger: "blur",
            },   
        ]
    }
    else{
        this.infoRules[key] = [];
    }
})

vue语句：

 <el-form
   ref="editFormRef"
   label-width="80px"
   size="mini"
   :model="modelData"
>
    <el-form-item v-for="(item, index) in modelData.formData" :key="item.paramName" :label="item.title" :prop='formData.'+index+'.value' :rules="editRules[item.paramName]">
        <el-input v-model="item.value" type="text">
        </el-input>
    </el-form-item>
</el-form>

值得注意的是，data数据与el-form里面的值需要一一对应，el-form里面的:model=""绑定数据；el-form-item的v-for :label :prop :rule 配置好：prop='formData.'+index+'.value'与你的设置的data对象字段一致