element-ui form表单校验成功，却不走this.$refs.form.validate(valid =＞ {}）回调（element-ui踩过的坑）

同事遇到了这种情况，网上搜索解答如下：

 

这是有问题的代码，验证错误，this.refs.form.validate(valid => {}）回调

  data() {
    // 校验时间
    let validatePerson = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择参与人员'))
      }
    }
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请填写日程名称'))
      }
    }
    let validateBeginTime = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择开始时间'))
      }
    }
    let validateEndTime = (rule, value, callback) => {
      if (this.form.begin_time === '') {
        callback(new Error('请选择结束时间'))
      }
      if (this.form.begin_time > this.form.end_time) {
        callback(new Error('结束时间大于开始时间'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        type: '1',
        begin_time: '',
        end_time: '',
        users: [],
        notes: ''
      },
      rules: {
        name: [{ validator: validateName, trigger: ['blur', 'change'] }],
        begin_time: [{ validator: validateBeginTime, trigger: 'blur' }],
        end_time: [{ validator: validateEndTime, trigger: 'blur' }],
        users: [
          { required: true, message: '请选择参与人员2', trigger: 'blur' },
          {
            validator: validatePerson,
            trigger: 'change'
          }
        ]
      }
    }
  },
 methods: {
   // 确认提交表单
    submitSchedule() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 传参
          let params = {
            name: this.form.name,
            type: this.form.type,
            begin_time: Number(this.form.begin_time) / 1000,
            end_time: Number(this.form.end_time) / 1000,
            users: this.form.users.join(','),
            notes: this.form.notes
          }
          this.update(params)
        }
      })
    }
}

原因，成功时没有调用，即成功则走callback()回调。

 

    let validatePerson = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择参与人员'))
      } else {
        callback() // 添加成功回调
      }
    }
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请填写日程名称'))
      } else {
        callback() // 添加成功回调
      }
    }
    let validateBeginTime = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择开始时间'))
      } else {
        callback() // 添加成功回调
      }
    }
    let validateEndTime = (rule, value, callback) => {
      if (this.form.begin_time === '') {
        callback(new Error('请选择结束时间'))
      }
      if (this.form.begin_time > this.form.end_time) {
        callback(new Error('结束时间大于开始时间'))
      } else {
        callback() // 添加成功回调
      }
    }

作者：前端青音
链接：https://www.jianshu.com/p/b150eac5ea2e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

https://www.jianshu.com/p/b150eac5ea2e