微客导航 » 文章资讯 » vue elementUI 表单校验的实现代码（多层嵌套）

vue elementUI 表单校验的实现代码（多层嵌套）

2023-08-09 19:11:05 159

嵌套对象的校验

项目中使用的vue+elementUI进行开发，已经用了有一段时间了，感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下，先通过前端校验，校验不通过不发送请求，直到满足校验规则，再发送请求给后端，从而提升用户体验。

elementUI对表单的校验有自己的方法，要求传入model的必须为一个对象。但如果数据结构比较复杂，对象里面又嵌套对象，该如何校验？本文给出多层对象嵌套的方法。

example

data(){
return{
formData:{
name:'',
password:'',
user:{
tel:''
},
phones:[
{brand:"华为",model:"",arr:[{data1:""}]},
{brand:"小米",model:"",arr:[{data1:""}]}
]
},
formRule:{
name:[{required:true,message:'不能为空',trigger:'blur'},
{pattern:/^[\u4E00-\u9FA5]+$/,message:'用户名只能为中文',trigger:'blur'}],
password:[{required:true,message:'不能为空',trigger:'blur'},
{validator:Verify.validatePassword,trigger:'blur'},
],
'user.tel':[{required:true,message:'手机号码不能为空',trigger:'blur'}],
'phones[0].model':[{required:true,message:'model不能为空',trigger:'blur'}],
},
}
},

methods:{
handleSubmit(){
constt=this;
t.$refs['formData'].validate((valid)=>{
if(valid){
console.log(this.formData);
}
})
}
}

校验方法

model绑定的formData中内层user也是一个对象，现在想要对tel进行校验，在prop中传递user.tel，并且在rules中也要指定user.tel即可。

对于子对象里面又嵌套数组的数据结构，如果想校验数组里的元素，需要在写一层form，用子对象作为新form表单再重新走一遍流程即可，具体例子请看上面的代码

对于验证规则，可以通过pattern或者validator来实现，pattern里面可以直接写正则表达式，不知道为啥文档中没有提到这点。之前的验证一般都是通过validator来实现的，验证方法单独写在一个文件中，这样可以做到整个项目公用，用到时只需通过import引一下即可。

校验效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

返回顶部
3162201930
czq8825@qq.com

vue elementUI 表单校验的实现代码（多层嵌套）

热门推荐

随机推荐