Element表单条件校验未及时生效

[TOC]

引言

我们经常会碰到这种场景，只有大于18岁，才对身份证号进行校验，但是结果发现，只有手动触发表单的validate方法或者validateField方法才能重新触发规则校验，比如我们经常会这么写：

<el-form
   :model="dataForm"
   ref="dataFormRef"
   :rules="rules"
>
  <el-form-item
    :label="年龄"
    prop="age"
  >
    <el-input
      v-model.trim="dataForm.age"
    ></el-input>
  </el-form-item>
  <el-form-item
    :label="银行卡号"
    prop="bank"
    :rules="dataForm.age > 18? rules.bank : []"
  >
    <el-input
      v-model.trim="dataForm.bank"
    ></el-input>
  </el-form-item>
</el-form>

:rules="dataForm.age > 18? rules.bank : []"就是核心条件校验代码。此时如果age从小于18变成大于18，银行卡号为空失焦并不会标红，原理应该是此处组件并没有重新渲染，而是复用了组件，所以会有这种问题。包括如果先标红后填写银行卡也不会让标红消失

解决方案

思索了许久，脑袋灵光一闪，发现可以结合el-form-item的required属性一起使用，使组件重新渲染，代码如下：

<el-form
   :model="dataForm"
   ref="dataFormRef"
   :rules="rules"
>
  <el-form-item
    :label="年龄"
    prop="age"
  >
    <el-input
      v-model.trim="dataForm.age"
    ></el-input>
  </el-form-item>
  <el-form-item
    :label="银行卡号"
    prop="bank"
    :required="dataForm.age > 18 ? true:false"
    :rules="dataForm.age > 18? rules.bank : []"
  >
    <el-input
      v-model.trim="dataForm.bank"
    ></el-input>
  </el-form-item>
</el-form>

核心关键就是增加了一行:required="dataForm.age > 18 ? true:false"代码，非常简单。
网上还有很多其他方法，特别是后面这篇更佳 vue elementUI组件表单动态验证失效的问题与解决办法
element-ui Form表单校验小结及踩坑