elementui 动态表单 自定义校验

阅读 (1686)
在官方手册中并未找到相关方法,自己琢磨出来的方案

动态表单中需校验开始时间和结束时间,因是动态添加的字段,如何验证,在官方文档中并未说明,在官方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"一样引用

更新于:2020-02-11 15:05:15

留言

发表评论

标记为*的字段是必填项(邮箱地址不会被公开), 由于国内舆论控制, 评论需要管理员审核通过方可展示

返回顶部