Cómo obtener el resultado de la validación del formulario en el elemento secundario en el elemento principal

1. método de validación

El método para validar todo el formulario, el parámetro es una función de devolución de llamada. La función de devolución de llamada se llamará después de que se complete la verificación y pasará dos parámetros: si la verificación es exitosa y el campo que falla la verificación. Si no se pasa ninguna función de devolución de llamada, se devolverá una promesa.

Nota: El parámetro de validación es una función de devolución de llamada, que es asíncrona. Si queremos obtener el resultado después de la verificación, deberíamos pensar en usar 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)
          }
        });

        })

      },

resultado:

1. Al ingresar 18,

 2. Cuando el cuadro de entrada está vacío:

Supongo que te gusta

Origin blog.csdn.net/qq_42931285/article/details/124288117
Recomendado
Clasificación