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

一、缘由

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

二、第一次实现与遇到的问题

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

但是发现虽然页面有了红色星号的验证提示，但实际上当失去焦点的时候并未触发校验，如图所示：

三、遇到问题的原因

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

  
    
  
  
    删除
  
  
    提交
    新增域名
    重置
  

其运行结果如下：

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

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

四、第二次实现与遇到的问题

我的思路是通过v-if和v-else写两个表单项，一个带prop属性，一个不带prop属性，通过强制销毁和创建表单实现表单的重新渲染。

然而并没啥用，还是没有生效！！！

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

官方文档是这样介绍的：

Vue代码风格指南

五、最终解决办法

完整代码如下：

最终效果如图，当年龄大于等于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属性接受数据和对象

 

六、总结

还需要多多了解对elementUI组件的一些底层原理，虽然看过不少有关vue框架底层原理和diff算法的资料，但在实际开发过程中容易忽略这些知识点，还是需要多踩坑多学习

《深入了解Element Form表单动态验证问题》https://blog.csdn.net/sinat_36521655/article/details/105294419