vue+element实现表单验证的动态rules校验

1.需求背景

书接上回，上次写了一篇文章介绍如何实现动态加载表单的组件，有很多朋友就问我通过动态加载组件生成的表单该怎么加rules验证。

我们先来看看常规情况下怎么实现的

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

rules {	
      name: [ { type: 'string',required: true,message: "名称必填", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }]
      }

常规情况下由于我们的表单结构是确定的，我们表单每个控件的位置是确定的，我们可以给每个el-form-item添加一个prop属性，属性的值跟rules里的key一一对应，这样rules就可以通过相关配置来实现表单的验证。

[但如果我们通过动态加载组件的方式生成表单](vue如何动态加载和调用子组件？(的使用) - 掘金 (juejin.cn))，我们没法确定表单的结构，该怎么给表单绑定rules校验呢？

2.动态加载rulus

先上核心代码

(this.rules[`${item.controlname}`] = [
  {
    required: Boolean(item.validateclient),//根据item.validateclient是否为空来判断是否需要验证。
    validator: validateArr[`${item.controlname}`],
    trigger: "blur",
  },
]),

在json结构里，遍历list，每个item对应的是一行el-form-item的相关配置

this.rules[`${item.controlname}`]是动态设置rules的key，item.controlname对应el-form-item中的prop，这样就可以关联起来。

其他的相关配置，像required,message等信息都可以通过json配置出来。

以上