element多个表单校验的实现
更新时间：2021年05月27日 17:05:52 作者：小白踩坑
在项目中，经常会遇到表单检验，在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法，感兴趣的可以了解一下
在项目中，经常会遇到表单检验，单个表单检验可查看element的官网文档，里面有详细的介绍。在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法，欢迎大家留言，一起探讨相关技术，请多多指教。
这里主要用到 Promise 来解决。
关于Promise方法举个例子来抽象理解：
周末想吃火锅，打电话告诉小A，过来我这打火锅，菜都齐了，就差点海鲜，你来的时候带点。接着打电话找朋友小B，过来我这打火锅，有海鲜，肉少了点，你来的时候带点。在接着打电话找朋友小C:过来我这打火锅，啥菜都有了，差点酒，你来的时候整几瓶。还差一包火锅底料，拿手机打电话，小D啊，来打活个，咋几个都在，我这电炉不太行了，啥都准备好了，你把电炉带过来，顺便带包底料。
吃火锅这个事就成了，美滋滋。
但这个事吧。总不会一直顺利，总有人来不了对吧，来不了这火锅就吃不成了。
其实多个表单验证，就和这差不多，每个表单都询问一遍，如果大家都通过了，美滋滋，假如其中一个验证失败，那对不起，还得告诉用户，填对了再说。
通过Promise，对每个表单执行询问检测，无论结果如果，先进入Promise.all中，等待所有表单询问完毕，如果大家就可以，就触发then，美滋滋。反之，catch中执行失败响应就ok了。
const formName = ['tableForm1', 'tableForm2', 'tableForm3']
const validates = (item) => {
return new Promise((resolve, reject) => {
if (!this.$refs[item]) {
resolve()
return false
}
this.$refs[item].validate((valid) => {
if (valid) {
resolve()
} else {
reject(new Error('验证不对'))
}
})
})
}
Promise.all(formName.map(item => validates(item))).then(() => {
console.log('成功')
}).catch(() => {
console.log('失败')
})
}
}
最后，在这里贴上完整代码：
<div class="home">
<el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" >
<el-form-item label="价格" prop="price">
<el-input v-model.number="tableForm1.price" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form :model="tableForm2" ref="tableForm2" :rules="rules2" label-width="100px" >
<el-form-item label="年龄" prop="age">
<el-input v-model.number="tableForm2.age" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form :model="tableForm3" ref="tableForm3" :rules="rules3" label-width="100px" >
<el-form-item label="姓名" prop="name">
<el-input v-model.number="tableForm3.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
tableForm1: {
price: ''
},
tableForm2: {
age: ''
},
tableForm3: {
name: ''
},
rules1: {
price: [{ required: true, message: '价格不能为空', trigger: 'blur' }]
},
rules2: {
age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }]
},
rules3: {
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
}
}
},
methods: {
resetForm () {
this.$refs.tableForm1.resetFields()
this.$refs.tableForm2.resetFields()
this.$refs.tableForm3.resetFields()
},
submitForm () {
const formName = ['tableForm1', 'tableForm2', 'tableForm3']
const validates = (item) => {
return new Promise((resolve, reject) => {
if (!this.$refs[item]) {
resolve()
return false
}
this.$refs[item].validate((valid) => {
if (valid) {
resolve()
} else {
reject(new Error('验证不对'))
}
})
})
}
Promise.all(formName.map(item => validates(item))).then(() => {
console.log('成功')
}).catch(() => {
console.log('失败')
})
}
}
}
</script>
到此这篇关于element多个表单校验的实现的文章就介绍到这了,更多相关element 表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了vue proxyTable 接口跨域请求调试的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。下面这篇文章主要给大家介绍了关于vue具名插槽基本使用的相关资料，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了关于Vue3&TypeScript的踩坑汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue自定义指令之面板拖拽的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vuex 设计思路和实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue如何实现简易流程图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了使用vue打包时gzip压缩的两种方案小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue中利用simplemde实现markdown编辑器（增加图片上传功能）
这篇文章主要介绍了vue中利用simplemde实现markdown编辑器（增加图片上传功能）,本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要给大家介绍了关于vue组件的路由高亮问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了Vue中的MVVM模式使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论