Form validation of complex object array by Vue + element UI

Form verification of complex object array by Vue + element UI in Title Project Development

  1. Demand scenario
    In the recent project development, there is a module about the purchase system. The purchase cannot avoid the account information form of purchase, and the purchase information is complex and added dynamically, so it also needs to traverse the most complex object array to add verification. First, add a picture 1-1, the verification effect picture.

    Here is A brief answer to some possible questions. Question 1: for example, why is the specification not verified? Because the rules and the ingredients array are bound, which has been done in the previous basic data. Therefore, checking whether the food materials are available also checks whether the specification data are available. Question 2: Why are the ingredients and rules forbidden to be input, because it is also required by the project to prevent customers from filling in wrong information, because different people can fill in A cabbage with N possibilities, such as A called cabbage, B called cabbage, C called cabbage And so on, that's not conducive to the later data induction. So add A selection button next to the input box to open the ingredients page, which is used to select the ingredients data. If you have other doubts, you can also be private.

  2. Complex data objects to verify
    Now let's go to the actual data of the above form, as follows:

        dailyUseRecordForm:////Add / modify option information in daily consumables registration information
        {   date:'',//Registration date of new and modified consumables
            gysName:'',//Add and modify supplier information of daily consumables
            gysId:'',//Add and modify account information supplier id
            details:[
                { 
                      foodName:'',//Name of new and modified daily consumables
                      spec:'',//Add and modify specifications of daily consumables
                      num:'',//Quantity of daily consumables added and modified
                      price:'',//Add and modify the unit price of daily consumables
                      foodId:'',//Add and modify account information food id
                      id:''//The id of the object
                }
            ]
        },
	The data type of the defined form is as shown above. It needs to be explained that at the beginning, there is only one piece of empty data in the ingredients data array (dailyUseRecordForm.details). Click the small "+" button or the following batch add button to add new object data to it. The following is how it looks after clicking the plus sign to add a piece of data to it:
        dailyUseRecordForm:////Add / modify option information in daily consumables registration information
        {   date:'',//Registration date of new and modified consumables
            gysName:'',//Add and modify supplier information of daily consumables
            gysId:'',//Add and modify account information supplier id
            details:[
                { 
                      foodName:'',//Name of new and modified daily consumables
                      spec:'',//Add and modify specifications of daily consumables
                      num:'',//Quantity of daily consumables added and modified
                      price:'',//Add and modify the unit price of daily consumables
                      foodId:'',//Add and modify account information food id
                      id:''//The id of the object
                },
                { 
                      foodName:'',
                      spec:'',
                      num:'',
                      price:'',
                      foodId:'',
                      id:''
                }
            ]
        },
  1. Enter the front page section of form validation
    (1) Define form validation rules:
dailyUseRecordRules:{//Validation rules of account information form
            gysName:[
                { required: true, message: 'Please enter supplier name', trigger: 'blur' },
                 { min: 2, max: 10, message: '2 to 10 characters in length', trigger: 'blur' },

            ],
            date: [
                { required: true, message: 'Please select a date', trigger: 'blur' },
                // {type: 'date', required: true, message: 'please select date', trigger: 'change'}
            ],
            foodName:[//Name of food
                { required: true, message: 'Please select ingredients', trigger: 'blur' },
                { min: 2, max: 10, message: '2 to 10 characters in length', trigger: 'change' },
            ],
            num:[
                { required: true, message: 'Please enter quantity', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*$)/,
                    message: 'Incorrect quantity format',
                    trigger: 'blur'
                }
            ],
            price:[
                { required: true, message: 'Please enter the price', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                    message: 'Incorrect price format',
                    trigger: 'blur'
                }
            ]
  }

The above are the form validation rules to be used later, which are defined in the data array.
(2) Form validation
Because today's topic is the verification of complex object traversal, we only analyze how to verify the data of complex data structure, that is, the object array in 'dailyUseRecordForm.details' above. How to traverse the array to add validation to each element.

<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>
		The above lines of code are the core to solve the form validation. Because there are buttons, placeholders and other factors that are not conducive to observation in their own pages, we first give a thought. The following is my actual situation. In fact, it's not necessary to see it, just to add a little bit of practical project substitution. I still stick it on, and the people who want to see it will see it, and the people who don't want to see it will ignore it.
<el-form-item   v-for='(item,index) in dailyUseRecordForm.details' :label=" 'Ingredients'+(index+1) "  :key="index">
                <el-form-item label='Name' :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='Specifications'>
                <el-input   v-model="item.spec  :placeholder=dailyUseRecordMessage.spec  :disabled="true"></el-input >
              </el-form-item>
              <el-form-item label='Number' :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='Unit Price' :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>element</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> 
  1. Summary
    The dynamic form validation given on the official website aims at the situation that only one attribute of the object in the array needs to be verified. If there are multiple attributes of the object in the data you need to traverse that need to be verified, you need to modify them as I mentioned above. If you have any questions, you can discuss them with me.
Published 3 original articles, won praise 1, visited 283
Private letter follow

Tags: Vue Attribute

Posted on Sun, 08 Mar 2020 22:18:14 -0700 by mattsinclair