element表单自定义校验,elementui多层循环动态表单校验
在项目中，我们经常会遇到表单检查。在这里，我分享一下我在实际项目中同时检查多个表单的解决方案。有兴趣的可以看看。
在项目中，我们经常会遇到表单检查。单个表单检查，请查看element的官网文档，里面有详细的介绍。在这里，我分享一下我在实际项目中同时检查多个表单的解决方案。欢迎留言，一起探讨相关技术。请给我们你的意见。
这里主要用承诺来解决。
举一个Promise方法的例子来抽象地理解它：
如果你周末想吃火锅，打电话给小啊，告诉她来我家做火锅。等所有菜都上齐了，差不多就是海鲜了。当你来的时候请带来一些。然后叫上我朋友小B来我这做火锅。有海鲜，但是肉有点少。当你来的时候请带来一些。然后给朋友小C打电话：来我那做火锅吧。我有各种各样的菜。我几乎喝葡萄酒。来的时候，做几瓶。我缺一包火锅底料。手机上打电话，小D，快来拿个直播的。为什么都在这里？我的电炉不太好。一切准备就绪。请带上电炉和底料。
吃火锅就好。很好吃。
但是这件事。不会一直顺利的。有人来不了吧？如果他们不能来，就不能吃这个火锅。
其实多种形式的验证和这个差不多。每张表格都要问一遍。如果大家都过了，那就太抬举了。如果其中一个验证失败，我很抱歉，但我必须告诉用户正确填写。
通过Promise，对每个表单进行查询检测。不管结果是yes，先输入Promise.all，等待所有表单被查询。如果每个人都可以，那么触发然后，这是美丽的。相反，在catch中执行失败响应是可以的。
const formName=[表格1 ，表格2 ，表格3]
const validates=(item)={
返回新承诺((解决，拒绝)={
如果(！这个。$refs[item]) {
解决()
返回false
}
这个。$refs[item]。验证((有效)={
如果(有效){
解决()
}否则{
拒绝(新错误(“不正确验证”))
}
})
})
}
promise . all(formname . map(item=validates(item)))。然后(()={
Console.log(成功)
}).catch(()={
Console.log(失败)
})
}
}
最后，将完整的代码粘贴到这里：
div class=home
El-form:model= table form 1 ref= table form 1 :rules= rules 1 label-width= 100px
El-form-item标签=价格属性=价格
El-input v-model . number= table form 1 . price 自动完成=off/el-input
/El-表单-项目
/el格式
El-form:model= table form 2 ref= table form 2 :rules= rules 2 label-width= 100px
El-form-item label= age prop= age
El-input v-model . number= tableform 2 . age autocomplete= off /El-input
/El-表单-项目
/el格式
El-form:model= table form 3 ref= table form 3 :rules= rules 3 label-width= 100px
El-form-item label= name prop= name
El-input v-model . number= tableform 3 . name autocomplete= off /El-input
/El-表单-项目
/el格式
El-button type= primary @ click= submit form submit/El-button
El-button @click=resetForm 重置/el-button
/div
/模板
脚本
导出默认值{
姓名：家，
data () {
返回{
表格1: {
价格：“”
},
表格2: {
年龄：“”
},
表格3: {
名称：“”
},
规则1: {
价格：[{必填：真，消息：价格不能为空，触发器：模糊 }]
},
规则2: {
年龄：[{必填：真，消息：年龄不能为空，触发器：模糊 }]
},
规则3: {
名称：[{必需：true，消息：名称不能为空，触发器：模糊 }]
}
}
},
方法：{
resetForm () {
这个. refs.tableForm1.resetFields()
这个. refs.tableForm2.resetFields()
这个. refs.tableForm3.resetFields()
},
submitForm () {
const formName=[表格1 ,表格2 ,表格3]
const validates=(item)={
返回新承诺((解决，拒绝)={
如果(!这个. refs[item]) {
解决()
返回错误的
}
这个参考文献[项目].验证((有效)={
如果（有效){
解决()
}否则{
拒绝（新错误(验证不对))
}
})
})
}
保证。所有(formname。map(item=validates(item))).然后(()={
console.log(成功)
}).catch(()={
console.log(失败)
})
}
}
}
/脚本
到此这篇关于元素多个表单校验的实现的文章就介绍到这了，更多相关元素表单校验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。