elementui 动态表单 自定义校验

动态表单中需校验开始时间和结束时间，因是动态添加的字段，如何验证，在官方文档中并未说明，在官方github项目的BUG提交中也有人提问，但没有正确的答案，这里其实用validator即可动态验证，官方的validator示例没有说怎么在动态表单中验证字段，先给出最终的解决方案：下面是示例

在线示例：https://jsfiddle.net/xs47968224/29n5cdjm/3/# （好像被墙了）

在线示例：http://jsrun.pro/PgfKp

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-form :label-position="'right'" label-width="150px" ref="mainForm" :rules="rules" :model="mainForm" >
<el-button type="text" icon="el-icon-plus" class="new-dom-btn" @click="handleNew()">添加新任务</el-button>
  <section class="content-box" v-for="(task, index) in mainForm.taskList" :key="task.key" :id="'contentBox'+index" >
<el-form-item
  :label="'任务'+index+'开始时间'"
  :prop="'taskList.' + index + '.expectStart'"
  >
  <el-date-picker
    v-model="task.expectStart"
    type="datetime"
    placeholder="任务预估开始时间"
    default-time="09:00:00"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>
</el-form-item>
<el-form-item
  :label="'任务'+index+'预估结束时间'"
  :prop="'taskList.' + index + '.expectEnd'"
  :rules="[{
    validator: (rule, value, callback) => { // 动态验证看这里
      // 如果你需要用到index， 这里也可以直接使用： 例 if(index===0){...}
      if (!task.expectStart) {
        return callback('请先设置预估开始时间')
      }
      var startTime = new Date(task.expectStart)
      var endTime = new Date(value) // 这里用 task.expectEnd 是一样的值
      if (startTime >= endTime) {
        return callback('预估结束时间必须大于预估开始时间')
      }
      callback()
    }, trigger: 'blur'
  }]"
  >
  <el-date-picker
    v-model="task.expectEnd"
    type="datetime"
    placeholder="任务预估结束时间"
    default-time="18:00:00"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>
</el-form-item>
</section>
</el-form>
</div>

var Main = {
  data() {
    return {
       mainForm: {
        taskList: [{         
          expectStart: '',
          expectEnd: '',       
          key: '1'
        }]
      }
    }
  },
  methods: {
    handleNew() {
      this.mainForm.taskList.push({
        expectStart: '',
        expectEnd: '',    
        key: Date.now()
      })
    },
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

注意看experctEnd的prop与rules，项目中需要动态验证并且是自定义验证，如果只需要自定义校验某个动态添加出来的字段，那取value的值进行判断即可，我这里需要与同一下标的其它字段验证，一开始我写mainForm.taskList[index].expectEnd，提示是mainForm未定义，后来才想到用直引用task.expectEnd即可，就像v-model="task.expectEnd"一样引用