父组件控制子组件的表单验证

父组件控制子组件的表单验证

前言： 在项目有时会遇到这样的一个需求，子组件是一个必填的form表单，在父组件点击提交的时候如何去校验 ( element-ui ) 子组件呢？

• 子组件 ( ChildRules ) 中正常写校验规则。 eg:

<el-form :model="ruleForm" ref="ruleForm" label-width="120px">
  <el-form-item label="物业公司名称：" prop="property.company_name" :rules="{ required: true, message: '物业公司名称不能为空', trigger: 'blur' }">
    <el-input v-model="ruleForm.property.company_name" placeholder="" clearable></el-input>
  </el-form-item>
    
  <el-form-item label="邮箱：" prop="property.company_email" :rules="[{ required: true, message: '请填写邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]" class="mt-10">
    <el-input v-model="ruleForm.property.company_email" placeholder="" clearable></el-input>
  </el-form-item>
</el-form>

复制代码

• 子组件中的校验方法。

// 校验数据
validateForm () {
  let flag = null
  this.$refs['ruleForm'].validate(valid => {
    if (valid) {
      flag = true
    } else {
      flag = false
    }
  })
  return flag
}

复制代码

• 父组件中调用

<child-rules ref="childRules"></child-rules>

<script>
   let flag = this.$refs['childRules'].validateForm()
</script>

复制代码

validateForm() 会校验子组件的 form 表单， flag 则为校验结果。

转载于:https://juejin.im/post/5c18c4516fb9a04a0b221b3c