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

 

这是有问题的代码,验证错误,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
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐