vue element实现多个Formt表单同时验证

 更新时间:2024年06月07日 16:53:33   作者:清风拂山感  
这篇文章主要介绍了vue element实现多个Formt表单同时验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue element多个Formt表单同时验证

多个Form内容统一提交验证

<el-form   ref="form1"></el-form>
<el-form   ref="form2"></el-form>
<el-form   ref="form3"></el-form>
<el-form   ref="form4"></el-form>
export default{
    data(){
        resultArr:[],//接受验证返回结果数组
        formArr:['form1','form2','form3','form4'],//存放表单ref数组
    },
    methods:{
        //封装验证函数
        checkForm(formName){
            let _self=this;
            _self.resultArr = []
            let result = new Promise(function(resolve, reject) {
            _self.$refs[formName].validate((valid) => {
                if (valid) {
                    resolve();
                } else { reject() }
                })
            })
            _self.resultArr.push(result) //push 得到promise的结果
        },
        submit(){
            let _self=this;
            _self.formArr.forEach(item => { //根据表单的ref校验
                _self.checkForm(item)
            })
           //resultArr数组的值必须是promise对象才能使用Promise.all,在checkForm做了这一步
            Promise.all(_self.resultArr).then(function() { //都通过了
              alert('所有表单验证通过')
              // 该区域使用this无效,promise内面的this表示局部,并不代表VueComponet实例
            }).catch(function() {
                console.log("err");
            });
        }
    }
}

vue多个表单校验 (巧用new promise)

场景

同一个页面有多个模块,每个模板又单独使用了一个表单组件,那么我们在点击提交按钮时如何同时校验多个表单,我们可以使用Promise

方案

  • 1、子组件

子组件:return 出当前的表单的数据

onSubmit() {
    let _self=this
    return new Promise((resolve, reject) =>{
        _self.$refs.form.validate(valid => {
            if (valid) { // 检验成功 传当前表单的数据
                resolve({0:_self.form})
            } else {
                this.$message.error('员工自选-清单需求,请按要求填写')
                reject()
            }
        })
    })
},
  • 2、父组件
<!-- 方案需求 -->
<div v-show="active === 2">
    <FormEmployeeList ref="Form0"></FormEmployeeList>
    <FormEmployeeGift ref="Form1"></FormEmployeeGift>
    <FormEmployeeCustomization ref="Form2"></FormEmployeeCustomization>
    <FormEnterprisesList ref="Form3"></FormEnterprisesList>
    <FormEnterprisesGift ref="Form4"></FormEnterprisesGift>
    <FormEnterprisesCustomization ref="Form5"></FormEnterprisesCustomization>
</div>

父组件:onSubmit时,调用子组件的onSubmit方法,接受promise的返回结果,再通过Promise.all()方法一一验证

onSubmit() {
    let  newArr = [] //承接promise的返回结果
    for (let v = 0; v < 6; v ++) {
        let res =this.$refs['Form' + v].onSubmit()
        newArr.push(res)
    }
    Promise.all(newArr).then(res => { //都通过了
    	console.log('res',res)
        //res是数组,需转对象
        let obj = Object.assign({},...res)
        this.form = obj
        console.log('大功告成',this.form)
    }).catch(err=> {
        console.log('err',err)
    })
},

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 利用Vue3实现一个可以用js调用的组件

    利用Vue3实现一个可以用js调用的组件

    最近遇到个功能要求,想要在全局中调用组件,而且要在某些js文件内调用,所以这篇文章主要给大家介绍了关于如何利用Vue3实现一个可以用js调用的组件的相关资料,需要的朋友可以参考下
    2021-08-08
  • VUE使用vue create命令创建vue2.0项目的全过程

    VUE使用vue create命令创建vue2.0项目的全过程

    vue-cli是创建Vue项目的一个脚手架工具,vue-cli提供了vue create等命令,下面这篇文章主要给大家介绍了关于VUE使用vue create命令创建vue2.0项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue.js中使用${}实现变量和字符串的拼接方式

    Vue.js中使用${}实现变量和字符串的拼接方式

    这篇文章主要介绍了Vue.js中使用${}实现变量和字符串的拼接方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue-cli脚手架创建项目遇到的坑及解决

    vue-cli脚手架创建项目遇到的坑及解决

    这篇文章主要介绍了vue-cli脚手架创建项目遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 为vue项目自动设置请求状态的配置方法

    为vue项目自动设置请求状态的配置方法

    这篇文章主要介绍了vue项目自动设置请求状态的配置方法,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vuex的四个常用核心概念解读

    Vuex的四个常用核心概念解读

    本文详细解析了Vuex中的四个核心概念及其区别,包括State用于存储状态,Getters用于计算属性并缓存,Mutations是唯一更改State的同步方法,Actions则用于提交Mutations且支持异步操作
    2024-11-11
  • Vue数据变了但页面没有变的几种情况及解决方法

    Vue数据变了但页面没有变的几种情况及解决方法

    如果,你发现自己需要在Vue中做一次强制更新,99.99%的情况,是你在某个地方做错了事,本文给大家就介绍了Vue数据变了,但页面没有变的几种情况及解决方法,并通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • Vue3使用路由及配置vite.alias简化导入写法的过程详解

    Vue3使用路由及配置vite.alias简化导入写法的过程详解

    这篇文章主要介绍了Vue3使用路由及配置vite.alias简化导入写法,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • vue如何利用axios调用后台api接口

    vue如何利用axios调用后台api接口

    这篇文章主要介绍了vue如何利用axios调用后台api接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 使用Vue3和ApexCharts实现3D径向条形图的代码

    使用Vue3和ApexCharts实现3D径向条形图的代码

    径向条形图是一种用于可视化单一数据点及其与目标或理想值的关系的图表类型,它在显示进度、完成率或其他类似度量时非常有用,本文给大家介绍了使用Vue3和ApexCharts实现3D径向条形图,感兴趣的小伙伴可以参考阅读下
    2024-06-06

最新评论