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

 

这是有问题的代码,验证错误,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

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐