element UI动态增减表单项表单验证 以及 自定义表单验证 的一些想法

一、前言

今天做项目遇到一个关于表单验证问题，前端vue+elementui，用的 el-form表单，表单项是由后端数据，使用v-for渲染出来，我们该如何定义每个表单域的验证规则呢？

二、思考

大概可以这么做：
后端返回数据的同时，加上每个表单域的验证规则，通过rules属性设置。

属性	作用
label	指定表单项前面显示的标签
key	相当于表单的name
prop	要进行表单验证的value的的路径，必须在el-form 的model指定的对象里面。该属性会以model指定的对象为根路径，查找变量的值
rules	表单域的验证规则

<el-form :model="form">
	<el-form-item
	    v-for="(item, index) in formList"
	    :label="'item.label"
	    :key="item.key"
	    :prop="'List.' + index + '.value'"
	    :rules="JSON.parse(item.rules)"
  	>
  </el-form-item>
</el-form>
<script>
  const API = require('./api')
  export default {
    created(){
    //例如这样
     var formdata = API.requestForm('http://*****')
     this.form.List = formList;
     this.formList=formdata;
	}
    data() {
      return {
      	formList
        form: {
         	List[],//如果你不想放在里面，可以在生命周期函数里将获得表单项数据复制一份到这里
        }
      };
    }
  }
</script>

如果出现什么什么 路径找不到，说明你的prop的路径写错了或者你的el-form所绑定的model里面没有你所填的变量，请检查。

三、逐渐入坑

         但是有的规则我们需要自定义，比如某个表单域需要判断：当内容包含中文时最多可输入10个字符，否则可输入20个字符，我们用element自带的就没有那么方便完成。这时候我们就需要自定义表单验证规则。
其实我们可以封装一个函数去增强 element的表单验证。
我也没有想起很好的方法。等大佬解答