el-form表单组件校验

最新推荐文章于 2024-10-12 13:54:31 发布

原创最新推荐文章于 2024-10-12 13:54:31 发布 · 667 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

ElementUI

12 篇文章

订阅专栏

javascript

11 篇文章

订阅专栏

本文介绍了在Vue中如何实现子组件校验表单数据并将其传递给父组件。通过子组件定义`validForm`方法，利用`$refs`进行调用，结合`el-form`的验证规则确保数据完整性和正确性。在父组件的`created`钩子中，通过异步调用子组件的方法获取校验后的表单数据。

子组件校验表单方法

// 保存前的校验
    async validForm () {
      return new Promise((resolve, reject) => {
        return this.$refs['baseForm'].validate(valid => {
          if (valid) {
            resolve(this.baseForm)
          }
        })
      })
    },

父组件调用

const baseForm = await this.$refs?.baseForm.validForm()

具体实现

father.vue

<Son ref="baseForm"/>

<script>
export default {
    name: "father",
    data() {
        return {
        baseForm:{}
        };
    },
  async created() {
            this.baseForm  = await this.$refs?.baseForm.validForm()
  }
};
</script>

son.vue

<el-form :model="baseForm" :rules="rules" ref="baseForm" label-width="100px" class="baseForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="baseForm.name"></el-input>
  </el-form-item>
</el-form>
  
<script>
export default {
    name: "son",
    data() {
        return {
        baseForm:{
           name:''
        },
        rules:{
           name:[{ required: true, message: '请填写', trigger: 'blur' }]
        }
        };
    },
  method:{
  // 保存前的校验
    async validForm () {
      return new Promise((resolve, reject) => {
        return this.$refs['baseForm'].validate(valid => {
          if (valid) {
            resolve(this.baseForm)
          }
        })
      })
    },
  }
};
</script>