项目中使用的vue + elementUI进行开发,已经用了有一段时间了,感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下,先通过前端校验,校验不通过不发送请求,直到满足校验规则,再发送请求给后端,从而提升用户体验。
elementUI对表单的校验有自己的方法,要求传入模型的必须为一个对象。但如果数据结构比较复杂,对象里面又嵌套对象,该如何校验?本文给出多层对象嵌套的方法。
示例
& lt; template>
& lt; el-form:模型=" formData”:规则=癴ormRule ref=癴ormData label-width”=?00 px”比;
& lt; el-form-item道具=懊帧北昵?靶彰痹?
& lt; el-input v模型=" formData.name "祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item道具=懊苈搿?懊苈搿北?
& lt; el-input v模型=" formData。密码”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item道具="用户。电话”的标签="手机号”在
& lt; el-input v模型=" formData.user。电话“祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item道具="手机[0]。模型”的标签="手机号”在
& lt; el-input v模型=" formData.phones[0]得“祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item v=" formData(电话、索引)。手机”:label="电话。品牌”:关键="电话。品牌”:支持="的电话。“+指数+”。模型”:规则=" {
要求:真实、消息:“模型不能为空”,触发:“模糊”
}”在
& lt; el-input v模型=" phone.model "祝辞& lt;/el-input>=癴ormData & lt; el-form:模型。手机(指数)" label-width=" 100 px”比;
& lt; el-form-item v="(项目,index1) formData.phones(指数)。加勒比海盗”:关键=" index1”:支持="加勒比海盗。“+ index1 +”。data1”标签=" data1”:规则=" {
要求:真实、消息:“data1不能为空”,触发:“模糊”
}”在
& lt; el-input v模型=" item.data1 "祝辞& lt;/el-input>
& lt;/el-form-item>
& lt;/el-form>
& lt;/el-form-item>
& lt;/el-form>
& lt; el-button @click=" handleSubmit "祝辞提交& lt;/el-button>
& lt;/template>
之前
数据(){
返回{
formData: {
名称:”,
密码:”,
用户:{
电话:“
},
手机:(
{品牌:“华为”模式:“”,加勒比海盗:[{data1: "}]},
{品牌:“小米”模式:“”,加勒比海盗:[{data1: "}]}
]
},
formRule: {
名称:[{要求:真的,信息:“不能为空”,触发:“模糊”},
{模式:/^ [\ u4E00 - \ u9FA5] + $/信息:“用户名只能为中文”,触发:“模糊”},
密码:[{要求:真的,信息:“不能为空”,触发:“模糊”},
{验证:验证。validatePassword触发:“模糊”},
),
的用户。电话:[{要求:真的,信息:“手机号码不能为空”,触发:“模糊”}),
“手机[0]。模型”:[{要求:真的,信息:”模式不能为空”,触发:‘模糊’}),
},
}
},
方法:{
handleSubmit () {
const t=;
参t。美元[‘formData] . validate((有效)=比;{
如果(有效){
console.log (this.formData);
}
})
}
}
之前
模型绑定的formData中内层用户也是一个对象,现在想要对电话进行校验,在提案中传递user.tel,并且在规则中也要指定user.tel即可。
<强>对于子对象里面又嵌套数组的数据结构,如果想校验数组里的元素,需要在写一层形式,用子对象作为新形式表单再重新走一遍流程即可,具体例子请看上面的代码
对于验证规则,可以通过模式或者验证器来实现,模式里面可以直接写正则表达式,不知道为啥文档中没有提到这点。之前的验证一般都是通过验证器来实现的,验证方法单独写在一个文件中,这样可以做到整个项目公用,用到时只需通过进口引一下即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
