美文网首页
element-ui form表单校验成功,却不走this.$r

element-ui form表单校验成功,却不走this.$r

作者: 前端青音 | 来源:发表于2019-08-26 16:31 被阅读0次

这是有问题的代码,验证错误,this.refs.form.validate(valid => {})回调并且会提示,验证成功,却没有走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() // 添加成功回调
      }
    }

相关文章

网友评论

      本文标题:element-ui form表单校验成功,却不走this.$r

      本文链接:https://www.haomeiwen.com/subject/jacdectx.html