element+vue循环数据形成的特殊表单验证规则（特殊）

最新推荐文章于 2024-06-05 14:26:44 发布

jcat_李小黑

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量3.4k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： ElementUI 文章标签：前端 vue 校验

本文链接：https://blog.youkuaiyun.com/weixin_43216105/article/details/88993785

本文主要探讨在Element UI中，基于从后台获取的动态数据进行表单验证的方法。当label、prop不固定，仅index确定时，介绍了只校验非空的规则。同时，针对具有多个校验规则的情况，提供了多种解决方案，包括在整体上添加校验规则。对于更复杂的情况，即label、prop、index和规则均不确定，只能依赖唯一标识符id进行校验。文章以实战经验为基础，解析了应对各种验证场景的策略。

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

前言

element的表单验证，实际项目中有部分表单数据是固定的，验证方式参考官网。也有很大一部分表单数据的label是从后台取得数据，在这种情况下验证方式就不同，也是此文所述。

后台数据常规验证（label，prop确定）

官网表单校验部分 http://element-cn.eleme.io/#/zh-CN/component/form

一、后台数据，label prop不确定，index确定——只校验非空

注意点：

:prop="'domains.' + index + '.value'"----:prop="'循环的数组名称.' + index + '.循环的数据key值'"

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key"
        :prop="'domains.' + index + '.value'" :rules="{
   
   
        required: true, message: '所选项不能为空', trigger: 'blur'
      }">
    </el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
</el-form>
<script>
    export default {
   
   
        data() {
   
   
            return {
   
   
                dynamicValidateForm: {
   
   
                    domains: [{
   
   
                        value: '1'
                    }, {
   
   
                        value: '2'
                    }],
                }
            };
        },
        methods: {
   
   
            //   提交
            submitForm(formName) {
   
   
                this.$refs[formName].validate((valid) => {
   
   
                    if (valid) {
   
   
                        alert('submit!');
                    } else {
   
   
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>

二、后台数据，label prop不确定，index确定——多个校验规则

方法一：相同的校验规则，在`el-form`整体加`rules`

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic" :rules="rules">
    <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key"
        :prop="'domains.' + index + '.value'"