vue + element-ui 对复杂对象型数组进行表单验证

最新推荐文章于 2024-09-28 13:59:02 发布

向子龙

最新推荐文章于 2024-09-28 13:59:02 发布

阅读量1w

点赞数 20

分类专栏： vue学习文章标签： vue js

本文链接：https://blog.csdn.net/qq_43551769/article/details/104747948

版权

vue学习专栏收录该内容

4 篇文章 1 订阅

订阅专栏

标题项目开发中vue + element-ui 对复杂对象型数组进行表单验证

需求场景
在最近的项目开发中，里面有个模块是关于采购系统的，采购避免不了做采购的台账信息表单，而采购的信息复杂且是动态添加的，所以也需要最复杂对象数组遍历循环添加验证。先添加一个图片1-1，这个验证的效果图。

这里对一些可能的小疑问做一下简要回答啊。疑惑1：比如为什么规格不做校验，因为规则和食材数组是绑定的，这在之前的的基础数据里已经做了。所以校验食材的有无也就校验了规格数据的有无。疑惑2：为什么食材和规则都是禁止输入的，因为防止客户填错信息，这也是项目要求的，因为不同的人填一个白菜会N种可能性，比如A叫小白菜，B叫大白菜，C叫白菜…诸如此类的，那不利于后面的数据归纳。所以在输入框旁边添加一个选择按钮，打开食材页面，用于选择食材数据。如朋友你有其他疑惑的也可以私我。
需要验证的复杂数据对象
现在让我们走进这个上述表单的数据的实况，如下所示：

        dailyUseRecordForm:新增、修改日消耗品登记信息中的选项信息
        {   date:'',//新增和修改日消耗品的登记日期
            gysName:'',//新增和修改日消耗品的供应商信息
            gysId:'',//新增和修改台账信息供应商id
            details:[
                { 
                      foodName:'',//新增和修改日消耗品的名称
                      spec:'',//新增和修改日消耗品的规格
                      num:'',//新增和修改日消耗品的数量
                      price:'',//新增和修改日消耗品的单价
                      foodId:'',//新增和修改台账信息食物id
                      id:''//该对象的id
                }
            ]
        },

	定义的表单数据类型如上所示，需要说明一下，初始的时候食材数据数组（dailyUseRecordForm.details）只有一条空数据，点击小“+”号按钮，或者下面的批量添加按钮都能往里面添加新的对象数据，下面是点击加号往里面添加一条数据后的样子：

        dailyUseRecordForm:新增、修改日消耗品登记信息中的选项信息
        {   date:'',//新增和修改日消耗品的登记日期
            gysName:'',//新增和修改日消耗品的供应商信息
            gysId:'',//新增和修改台账信息供应商id
            details:[
                { 
                      foodName:'',//新增和修改日消耗品的名称
                      spec:'',//新增和修改日消耗品的规格
                      num:'',//新增和修改日消耗品的数量
                      price:'',//新增和修改日消耗品的单价
                      foodId:'',//新增和修改台账信息食物id
                      id:''//该对象的id
                },
                { 
                      foodName:'',
                      spec:'',
                      num:'',
                      price:'',
                      foodId:'',
                      id:''
                }
            ]
        },

进入表单验证的前端页面部分
（1）定义表单验证规则：

dailyUseRecordRules:{//台账信息表单验证规则
            gysName:[
                { required: true, message: '请输入供应商名称', trigger: 'blur' },
                 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },

            ],
            date: [
                { required: true, message: '请选择日期', trigger: 'blur' },
                // { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            foodName:[//食材名称
                { required: true, message: '请选择食材', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' },
            ],
            num:[
                { required: true, message: '请输入数量', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*$)/,
                    message: '数量格式有误',
                    trigger: 'blur'
                }
            ],
            price:[
                { required: true, message: '请输入价格', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                    message: '价格格式有误',
                    trigger: 'blur'
                }
            ]
  }

以上是待会需要用到的表单验证规则，在data数组里定义。
（2）进行表单验证
因为今天的主题是复杂对象遍历的验证，所以我们只分析怎样验证复杂数据结构的数据，也就是上面的‘dailyUseRecordForm.details’中的对象数组。如何遍历该数组，来给每个元素添加验证。

<div v-for="(item,index) in dailyUseRecordForm.details :key="index">
    <el-form-item label="name" :prop="`details[${index}].foodName`" :rules="dailyUseRecordRules.foodName">
       <el-input   v-model="item.foodName"></el-input>
   </el-form-item>
   <el-form-item label="name" :prop="`details[${index}].num`" :rules="dailyUseRecordRules.num">
       <el-input   v-model="item.num"></el-input>
   </el-form-item>
  <el-form-item label="name" :prop="`details[${index}].price`" :rules="dailyUseRecordRules.price">
       <el-input   v-model="item.price"></el-input>
   </el-form-item>
</div>

		以上的几行代码便是解决表单验证的核心所在，因为自己的页面中有按钮，占位符等不利于观察的因素，所以先给出一个思路。下面是自己实际中的情况，其实这个没有看到必要，只是为了增加一点实际的项目代入感，我还是粘上，想看的人看，不想看的人忽略。

<el-form-item   v-for='(item,index) in dailyUseRecordForm.details' :label=" '食材'+(index+1) "  :key="index">
                <el-form-item label='名称' :prop="`details[${index}].foodName`" :rules='dailyUseRecordRules.foodName'>
                <el-input v-model="item.foodName" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.name :disabled="true">	 </el-input>
                <el-button  icon="el-icon-search" @click='searchDialogOpen(index)'></el-button>
              </el-form-item>
              <el-form-item label='规格'>
                <el-input   v-model="item.spec  :placeholder=dailyUseRecordMessage.spec  :disabled="true"></el-input >
              </el-form-item>
              <el-form-item label='数量' :prop="`details[${index}].num`" :rules='dailyUseRecordRules.num'>
                <el-input v-model="item.num" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.num clearable></el-input>
              </el-form-item>
              <el-form-item label='单价' :prop="`details[${index}].price`" :rules='dailyUseRecordRules.price'>
                <el-input v-model="item.price" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.price clearable></el-input>
                <span>元</span><span  v-show="item.spec === '' ? false : true" >/{{item.spec}}</span>
              </el-form-item> 
              <el-form-item style="display:inline-block;">
                <el-button icon='el-icon-delete' @click="delFoodDetail(index)"></el-button>
              </el-form-item> 
              <el-form-item style="display:inline-block;" v-if="index === Number(dailyUseRecordForm.details.length)-1">
                <el-button icon='el-icon-plus' @click="addFoodDetail"></el-button>
              </el-form-item>
  </el-form-item>