vue elementUI组件表单动态验证失效的问题与解决办法

一、缘由
在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。

二、第一次实现与遇到的问题
比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下：

<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules">
    <el-form-item label="名字" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" :prop="formData.age >= 18 ? 'bankCardNo' : ''">
      <el-input v-model="formData.bankCardNo"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'HelloWorld',
 
  data () {
    return {
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        bankCardNo: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }]
      },
      formData: {
        name: '',
        age: '',
        bankCardNo: ''
      }
    }
  }
}
</script>
但是发现虽然页面有了红色星号的验证提示，但实际上当失去焦点的时候并未触发校验，如图所示：

三、遇到问题的原因
所以去查阅了elementUI的官方文档，文档给出了一种动态添加表单项动态的验证的示例，示例代码如下：

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>
其运行结果如下：

但官方文档提供的示例与我想要的并不一样，于是上网查找了其他资料。

发现我的方法与官方文档的区别在于，官方文档的示例是通过v-for循环的方式渲染出来的表单，当数组domains变化时会触发表单的重新渲染（起初并未意识到这一点），所以能够有效的动态验证表单，而我的方法只是动态修改了props属性，而并未出发表单的重新渲染，验证器中的prop属性并未更新，还是初次渲染时的空值，知道原因就想到了解决办法。

四、第二次实现与遇到的问题
我的思路是通过v-if和v-else写两个表单项，一个带prop属性，一个不带prop属性，通过强制销毁和创建表单实现表单的重新渲染。

<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules">
    <el-form-item label="名字" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" v-if="formData.age >= 18" prop="bankCardNo">
      <el-input v-model="formData.bankCardNo"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" v-else>
      <el-input v-model="formData.bankCardNo"></el-input>
    </el-form-item>
  </el-form>
</template>
然而并没啥用，还是没有生效！！！

实际上出现这个问题是因为vue的diff算法，在diff算法中会尽可能的复用组件，所以此处看上根据formData.age是否大于等于18进行切换，但实际上diff算法会复用组件，并没有重新渲染，所以需要配合key属性。

官方文档是这样介绍的：

Vue代码风格指南

五、最终解决办法
完整代码如下：

<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules">
    <el-form-item label="名字" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" key="1" v-if="formData.age >= 18" prop="bankCardNo">
      <el-input v-model="formData.bankCardNo"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" key="2" v-else>
      <el-input v-model="formData.bankCardNo"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'HelloWorld',
 
  data () {
    return {
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        bankCardNo: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }]
      },
      formData: {
        name: '',
        age: '',
        bankCardNo: ''
      }
    }
  }
}
</script>
最终效果如图，当年龄大于等于18时就会触发验证器。

2020年4月3日更新
上述方法没有真正理解原因，可以查看本人新文章《深入了解Element Form表单动态验证问题》，提及两种新解决办法：

1.  form-item保留prop属性，根据条件动态修改form组件的rules对象

watch: {
  'formData.age': {
    immediate: true,
    handler (newVal) {
      if (newVal >= 18) {
        this.addRule('bankCardNo', [{ required: true, message: '请输入银行卡号', trigger: 'blur' }])
      } else {
        this.addRule('bankCardNo', [])
      }
    }
  }
}
 
data () {
  return {
    rules: {}
  }
},
 
methods: {
  addRule (prop, rule) {
    this.$set(this.rules, prop, rule)
  }
}
2. form-item保留prop属性，根据条件动态修改form-item组件的rules属性。比如下面两种方式，因为rules属性接受数据和对象

<el-form-item label="银行卡号" prop="bankCardNo" :rules="formData.age >= 18 ? [{ required: true, message: '请输入银行卡号', trigger: 'blur' }] : []">
  <el-input v-model="formData.bankCardNo"></el-input>
</el-form-item>
 
<!-- 或者 -->
<el-form-item label="银行卡号" prop="bankCardNo" :rules="formData.age >= 18 ? { required: true, message: '请输入银行卡号', trigger: 'blur' } : []">
  <el-input v-model="formData.bankCardNo"></el-input>
</el-form-item>