vue+element动态增减表单项并实现校验

场景：在表单中实现动态增减经纬度，参考element给我们提供了一个动态增减表单项的例子
核心代码如下

// template中的代码
   <el-form-item
     v-for="(item, index) in editForm.lonLat"
     :label="'第' + Number(index+1)+ '组经纬度'"
     :key="index"
     :prop="'lonLat.' + index + '.lonLat'"
     :rules="addLonLatRules"
     class="one-line-label"
   >
     <el-input
       v-model="item.lonLat"
       class="input" /><el-button 
         size="mini"
         @click.prevent="removeLonLat(item)">删除</el-button>
   </el-form-item>

  // 动态新增表单的验证规则
    addLonLatRules: [{ trigger: 'blur', validator: validateLonLat }],
  // 动态添加项目经纬度
   addLonLat() {
     this.editForm.lonLat.push({
       lonLat: ''
     });
   },
   // 删除动态添加的经纬度输入框
   removeLonLat(item) {
     let index = this.editForm.lonLat.indexOf(item);
     if (index !== -1) {
       this.editForm.lonLat.splice(index, 1);
     }
   },

如果想要限制必填，就在addLonLatRules里面添加上，如下：

   // 动态新增表单的验证规则
   addLonLatRules: [
     { trigger: 'blur', validator: validate.validateLonLat },
     { required: true, message: '请输入经纬度', trigger: 'blur' }//经纬度必填
   ],

需要注意的是动态增减表单项的校验
正常的单项表单校验用的是prop，而动态生成的表单要用:props
prop书写的语法是：
:prop="‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’"，:prop是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。
如下：

 :prop="'lonLat.' + index + '.lonLat'"

还有一个需要注意就是v-for的写法，要将表单的model名写进去

v-for="(item, index) in editForm.lonLat"//editForm就是表单的model名

element上的校验只是提供了非空校验，如下

比如我这个需求，需要规定 ‘经度,纬度’ （11.23,12.56）这种格式的数据，所以必须自定义校验规则
要实现行内自定义校验，如果这样写：rules: “{validator: validateA, trigger: ‘blur’}”，然后在data里面定义validateA 的校验规则，会报错提示会提示validateA是undefined。
解决如下：
在data里面定义经纬度校验的规则：

    // 经纬度格式验证
    let validateLonLat = (rule, value, callback) => {
      let LONLAT_REG = /^[1-9][0-9]{0,2}(\.[0-9]{1,9}),[1-9][0-9]{0,2}(\.[0-9]{1,9})?$/;
      if (value) {
        if (!LONLAT_REG.test(value)) {
          callback(new Error('请输入有效的经纬度'));
          return;
        }
      }
      callback();
    };
    // 动态新增表单的验证规则
     addLonLatRules: [{ trigger: 'blur', validator: validateLonLat }],

然后在template里面的表单里进行如下书写

这样就完成了动态增减表单项并自定义校验。