Title project development vue + element-ui-type array of complex objects form validation
-
Demand scenario
in the recent development of the project, which has a module on procurement systems, procurement can not do to avoid purchasing ledger information form, and the procurement of information and complexity is added dynamically, so it requires the most complex array of objects through the loop add validation. First add a picture 1-1, this verification renderings.
Here some little doubt may give you a brief answer ah. 1 doubts: for example, why not check specifications, because the rules are binding and an array of ingredients, which is the basis of the data before had already been done. So check the ingredients will check whether the presence or absence of specification data. 2 wondering: Why are rules prohibiting food and enter, as to prevent customer information incorrectly, which is the project requirements, because different people fill N possibilities would be a cabbage, Chinese cabbage called such as A, B called Chinese cabbage, C called cabbage ... like, that is not conducive to the back of the data are summarized. Therefore, to add a box next to the input selection button to open the page ingredients, ingredients used to select data. As a friend you have any other questions I can also be private. -
Need to verify complex data objects
Now let us into the live data in the form above, as follows:
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:''
}
]
},
- Into the page form validation distal portion
(1) define the form validation rules:
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'
}
]
}
These are form validation rules will need to be used, are defined in the data array.
(2) form validation
because today's topic is complex object traversal verification, so we only analyze how data validation complex data structures, which is an array of objects above 'dailyUseRecordForm.details' in. 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>
以上的几行代码便是解决表单验证的核心所在，因为自己的页面中有按钮，占位符等不利于观察的因素，所以先给出一个思路。下面是自己实际中的情况，其实这个没有看到必要，只是为了增加一点实际的项目代入感，我还是粘上，想看的人看，不想看的人忽略。
<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>
- Summary section
dynamic form validation is the official line given for the case of the array object has only one property need to verify if you need to traverse the data object has multiple attributes requires authentication, you need to do the same as I described above modification. There are questions about my private friends can, let's discuss.
