vue elementUI 表单嵌套验证的实例代码

2023-08-09 19:21:04 76

一：表单一级验证

element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证

简单的表单验证很简单，在prop内绑定验证属性，然后在rules对象内定义验证方法

rules:{
belongId:[{
required:true,
message:'不能为空',
trigger:'change'
}]
}

二：模板一次循环渲染时表单验证

循环内模板验证prop绑定值就是一个问题了，因为它是循环出来的没办法直接写死在内，所以prop就需要动态绑定验证属性，这里需要注意一下，动态prop内绑定的是要和form内定义的属性名以及model绑定的值要对应上。比如上面prop里的factoryName，form.warehouseList里子元素也要有这个属性，select中model绑定的也应该是factoryName。因为是循环出来的，所以model绑定的就是‘item.factoryName'。

如果prop内绑定的验证属性名对应不上，控制台一般都会报下面这个错误

![cuowu.png](/img/bVbzWSa)

三：循环嵌套循环的表单验证

比如说是这种：

from:{
warehouseList:[{
productList:[{
productNumber:'',
productUnitPrice:''
}]
}]
}

要是需要监听productList中的productNumber，并且进行验证，这就是第三层的验证。

prop内绑定的值需要把第一层循环时的父元素warehouseList一并写上一直写到input内绑定的model值

:prop="'warehouseList.'+index+'.productList.'+itemIndex+'.productName'"

验证方法：

setRulesProduct(){
letthat=this
letlist1=that.form.warehouseList
//letlist2=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(newError('订单号不能为空'))
}elseif(value.length<1||value.length>20){
callback(newError('订单号请保持在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(newError('产品数量不能为空'))
}elseif(value.length<1||value.length>20){
callback(newError('产品数量请保持在1-20字符内'))
}else{
callback()
}
},
trigger:'blur'
}]
that.rules['warehouseList.'+i+'.productList.'+childIndex+'.productUnitPrice']=[{
required:true,
message:'请填写单价',
trigger:'blur'
}]
})
}
})
}
}

在组件创建时调用次方法就可以了。多层嵌套验证就搞定了，互不影响。

最重要的一点就是循环时prop内绑定的验证属性名一定要和model绑定的值相对应上，循环嵌套过多的就需要一直往上层找，找到最上层元素。

总结

以上所述是小编给大家介绍的vue+elementUI表单嵌套验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue elementUI 表单嵌套验证的实例代码

热门推荐

随机推荐