在vue项目中,使用element-ui的表单校验能节省很多时间,简单的对象表单校验,很简单,使用prop属性就可以直接校验。但是,如果表单项里有通过v-for动态生成的数组对象,又该怎么设置验证呢?
1、总结:
1) v-for要遍历的数组dynamicItem
// 字典维护表单
dictMaintainForm: {
dynamicItem: [
{
typeId: this.$route.query.typeId,
code:this.$route.query.code,
selectOne: "",
selectOneNumber: ""
}
]
},
2) 表单验证规则
// 表单验证
dictMaintainFormRules: {
selectOne: [
{ required: true, message: "请输入选项值名称", trigger: "blur" },
{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
],
selectOneNumber: [
{ required: true, message: "请输入选项值编号", trigger: "blur" },
{ validator: checkNumber, trigger: "blur" }
]
}
template示例:
<div v-for="(item, index) in dictMaintainForm.dynamicItem" :key="index">
<el-form-item
label-width="140px"
label="选项值:"
:prop="'dynamicItem.' + index + '.selectOne'"
:rules="dictMaintainFormRules.selectOne"
>
<el-input
v-model="item.selectOne"
placeholder="请输入选项值名称"
></el-input>
</el-form-item>
<el-form-item
:prop="'dynamicItem.' + index + '.selectOneNumber'"
:rules="dictMaintainFormRules.selectOneNumber"
>
<el-input
placeholder="请输入选项值编号"
v-model="item.selectOneNumber"
></el-input>
</el-form-item>
</div>