vue动态添加表单并验证

    Vue中的表单验证很简单，但若是动态添加的表单，如通过v-for循环出来的动态表单，就需要想额外的办法了。

    查找资料，一篇文章写的很详细，原文在这里。但我按照文章里的步骤做完之后，怎么都不生效。最后检查了很久才发现是一个地方的配置写错了位置。由于配置的地方比较多，可能会有不少和我一样马虎的盆友会写错，所以在这里重点标注一下需要注意的地方。

    红色框是需要配置的部分，蓝色圈和绿色圈是分别对应的。部分代码如下：

 <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="150px" class="data-form">
      <div v-for="(item,i) in dataForm.cardArr" :key="i">
        <el-form-item label="充值金额：" :prop="`cardArr.${i}.charge`" :rules="cardRules.charge">
          <el-input v-model.trim="item.charge" placeholder="请输入充值金额"></el-input>
        </el-form-item>
      </div>
 </el-form>

数据部分配置如下，蓝色与绿色部分，分别与上面的蓝色与绿色对应。

    所有的配置项层级和位置都不能放错，否则就没有效果咯。数据部分代码如下：

 data () {
    //正整数
    var checknumber = (rule, value, callback) => {
      var reg = /^[\d]+$/;
      if(value&&!reg.test(value)) {
        callback(new Error('请输入不小于0的整数'));
      } else if(value > 9999999) {
        callback(new Error('请输入不超过9999999的整数'));
      } else {
        callback()
      }
    };
    return {
      dataForm: {
        cardArr:[]
      },
      rules: {
      },
      cardRules: {
        charge: [{
          required: true,
          message: '请输入充值金额',
          trigger: 'blur'
        },{
          validator:checknumber,
          trigger: 'blur'
        }]
      }
    }
  }