vue elementUI 表单嵌套验证的实例代码
作者：enjoylife
一：表单一级验证
element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证
<el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent>
<el-form-item label="客户名称:" size="small" prop="belongId"> <el-input v-show="false" v-model="form.belongId"></el-input> <ComSelectorCustomer :value="form.customerName" @change="choice"></ComSelectorCustomer> </el-form-item>
简单的表单验证很简单，在prop内绑定验证属性，然后在rules对象内定义验证方法
rules: {
belongId: [{
required: true,
message: '不能为空',
trigger: 'change'
}]
}
二：模板一次循环渲染时表单验证
<el-row v-for="(item, index) in form.warehouseList" :key="index">
<el-col :span="21">
<el-form-item label="厂库名称:" size="small" :prop="'warehouseList.' + index + '.factoryName'">
<el-select
v-model="item.factoryName"
clearable
filterable>
<el-option
v-for="(child, ind) in factoryList"
:key="ind"
:label="child.label"
:disabled="child.disabled"
:value="child.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
循环内模板验证prop绑定值就是一个问题了，因为它是循环出来的没办法直接写死在内，所以prop就需要动态绑定验证属性，这里需要注意一下，动态prop内绑定的是要和form内定义的属性名以及model绑定的值要对应上。比如上面prop里的factoryName，form.warehouseList里子元素也要有这个属性，select中model绑定的也应该是factoryName。因为是循环出来的，所以model绑定的就是‘item.factoryName'。
如果prop内绑定的验证属性名对应不上，控制台一般都会报下面这个错误
三：循环嵌套循环的表单验证
比如说是这种：
from: {
warehouseList: [{
productList: [{
productNumber: '',
productUnitPrice: ''
}]
}]
}
要是需要监听productList中的productNumber，并且进行验证，这就是第三层的验证。
<div v-for="(itemChild, itemIndex) in item.productList" :key="itemIndex">
<el-col :span="9">
<el-form-item label="客户品名:" label-width="110px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'">
<el-input v-show="false" v-model="itemChild.productName"></el-input>
<ComSelectorProduct :value="itemChild.productName"
@change="choice"></ComSelectorProduct>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="数量:" label-width="60px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productNumber'">
<el-input clearable v-model="itemChild.productNumber" placeholder="数量"></el-input>
</el-form-item>
</el-col>
</div>
prop内绑定的值需要把第一层循环时的父元素warehouseList一并写上一直写到input内绑定的model值
:prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'"
验证方法：
setRulesProduct() {
let that = this
let list1 = that.form.warehouseList
// let list2 = that.form.warehouseList.productList
if (list1 && list1.length) {
list1.forEach((item, i) => {
that.rules['warehouseList.' + i + '.factoryName'] = [{
required: true,
message: '请选择厂库',
trigger: 'change'
}]
that.rules['warehouseList.' + i + '.orderNumber'] = [{
required: true,
min: 1,
max: 20,
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('订单号不能为空'))
} else if (value.length < 1 || value.length > 20) {
callback(new Error('订单号请保持在1-20字符内'))
} else {
callback()
}
},
trigger: 'blur'
}]
that.rules['warehouseList.' + i + '.deliveryTime'] = [{
required: true,
message: '请选择日期',
trigger: 'blur'
}]
if (item.productList && item.productList.length) {
item.productList.forEach((childItem, childIndex) => {
that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productName'] = [{
required: true,
message: '请选择产品',
trigger: 'change'
}]
that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productNumber'] = [{
required: true,
min: 1,
max: 20,
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('产品数量不能为空'))
} else if (value.length < 1 || value.length > 20) {
callback(new Error('产品数量请保持在1-20字符内'))
} else {
callback()
}
},
trigger: 'blur'
}]
that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productUnitPrice'] = [{
required: true,
message: '请填写单价',
trigger: 'blur'
}]
})
}
})
}
}
在组件创建时调用次方法就可以了。多层嵌套验证就搞定了，互不影响。
最重要的一点就是 循环时prop内绑定的验证属性名 一定要和model绑定的值相对应上，循环嵌套过多的就需要一直往上层找，找到最上层元素。
总结
以上所述是小编给大家介绍的vue + elementUI 表单嵌套验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！