如何在父元素中获取子元素中表单验证的结果

_处女座程序员的日常

已于 2022-04-20 07:30:28 修改

阅读量524

点赞数 2

分类专栏： Element UI 前端 ES6 文章标签：前端 es6

于 2022-04-20 07:28:54 首次发布

本文链接：https://blog.csdn.net/qq_42931285/article/details/124288117

版权

前端同时被 3 个专栏收录

372 篇文章 13 订阅

订阅专栏

Element UI

58 篇文章 1 订阅

订阅专栏

ES6

31 篇文章 1 订阅

订阅专栏

1.validate方法

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。

注：validate参数是回调函数，是异步的，若我们要拿到验证之后的结果，就应该想到用promsie。

// 父元素
 <Son ref="sonRef"></Son>
 <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>

  async submitForm(){
      let result  = await this.$refs.sonRef.submitForm();
      console.log('返回的值为');
      console.log(result);
      },
// 子元素

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="年龄"
          prop="age"
          :rules="[
            { required: true, message: '年龄不能为空'},
            { type: 'number', message: '年龄必须为数字值'}
          ]"
        >
          <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
  submitForm() {
        return new Promise(resolve=>{
            this.$refs['numberValidateForm'].validate(
            (valid) => {
          if (valid) {
            resolve(this.numberValidateForm)
          } else {
           resolve(false)
          }
        });

        })

      },

结果：

1.输入18时，