vue父组件调用子组件的Form表单校验

最新推荐文章于 2024-07-11 14:02:17 发布

SwJieJie

最新推荐文章于 2024-07-11 14:02:17 发布

阅读量2.8k

点赞数 2

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_44552416/article/details/131592414

版权

文章讲述了在Vue.js应用中，如何从父组件调用子组件的表单验证方法，以及如何处理多个子组件的验证。在需求1中，通过$refs调用子组件的validate方法进行验证，然后根据返回结果执行后续操作。在需求2中，使用Promise.all来同步验证多个子组件的表单，确保所有验证都通过后执行保存操作。

摘要由CSDN通过智能技术生成

需求1：父组件调用子组件的表单验证方法，验证成功，继续进行接下来的操作，验证失败，提示用户并返回。

在这里插入图片描述

需求2：父组件校验多个子组件的表单验证方法，验证成功，继续进行接下来的操作，验证失败，提示用户并返回。

在这里插入图片描述

需求1，代码如下：

1，在父组件中引入子组件

 <el-dialog
  :title="title"
   :visible.sync="dialogVisible"
   width="50%"
   :before-close="handleClose"
 >
   <exciter-edit ref="alternatorRef" />
   <span slot="footer" class="dialog-footer">
     <el-button @click="handleClose">取 消</el-button>
     <el-button type="primary" @click="transformerConfirm(insEdit)"
       >确 定</el-button
     >
   </span>
 </el-dialog>

2，子组件中的校验方法

方法一：
 async justify() {
 //校验成功则方法自动返回true，校验方法报错则说明校验失败，返回false
	try {
	   return await this.$refs['ruleFormRef'].validate()
	 } catch (error) {
	   return false
	 }
	}

方法二：

validate(callback){
 //这个form是子组件内部 el-form 的 ref="contentForm"
   this.$refs.contentForm.validate((valid) => {
     callback(valid)
   })
 }

3，在父组件中点击【确定】按钮调用方法
方法一：调用子组件校验方法判断：

async transformerConfirm(value) {
  //调用校验子组件的方法
    let flag = await this.$refs.alternatorRef.justify()
    //如果子组件校验方法返回ture，则接着进行其他操作，返回false则提示用户
    if (flag) {
		//to do something
    } else {
      this.$message.warning('校验失败')
    }
  }

方法二：通过调用子组件form方法进行验证：

async transformerConfirm(value) {
  //调用校验子组件的方法
   this.$refs['contentForm'].validate((valid) => {
        if (valid) {...}
      }
}

需求2，代码如下：

1，如果是父组件校验多个子组件

saveData(flag){
  const a1 = new Promise((resolve, reject) => {
      this.$refs.contentForm.validate((valid) => {
        if (valid) resolve()
      })
    })
    const a2 = new Promise((resolve, reject) => {
      this.$refs.pageForm.validate((valid) => {
        if (valid) resolve()
      })
    })
    Promise.all([a1, a2]).then(() => {
    //全部验证通过
    //写保存方法
    })
  },