在这里插入图片描述

场景:在表单中实现动态增减经纬度,参考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里面的表单里进行如下书写
在这里插入图片描述
这样就完成了动态增减表单项并自定义校验。

Logo

前往低代码交流专区

更多推荐