element 提交不触发请求--自定义校验没写返回函数。。。

这个地方小菜鸟已经踩过2次坑了,呜呜呜...

element+vue

这是一个提交表单事件,表单里面有自定义校验,校验符合条件,控制台也没有报错,但就是不触发请求,这是为什么呢???

最初我以为是方法写的问题,然而并不是,哈哈哈

是因为:自定义校验中没有callback()返回函数,因为进入自定义校验没有callback()函数,,触发提交方法的时候就会一直在里面等待结果,就只能走到如下代码:

 this.$refs['formDeposite'].validate(valid => {})

所以千万记住啦!!!

自定义校验一定要有返回函数啦!!!
1.点击"确认"按钮

 <template slot="btn-inner">
      <el-button :loading="loading.submit" @click="submitForm" icon="iconfont icon-tijiao" type="primary">确认</el-button>
    </template>

2.表单

 <el-form
            :model="formDeposite"
            :validate-on-rule-change="false"
            label-position="left"
            label-width="140px"
            :rules="rules"
            ref="formDeposite">
            <div class="area-title">
              <p class="title">资金信息</p>
            </div>
            <div class="form-inner">
              <el-row :gutter="80">
                <el-col :span="12">
                  <el-form-item label="冻结金额：" >
                    <span>{
   
   {utils.moneyFormat(form.financeFee.benjin)}}元</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <!-- 交易日期不能大于保证金申请日期 -->
                  <el-form-item label="交易日期：" prop="hkDate">
                    <el-date-picker
                      v-model="formDeposite.hkDate"
                      type="date"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
</el-form>

3.data中定义

 data () {
  // 提交表单
      formDeposite: {}
}

4.自定义校验

data () {
    let checkTime = (rule, value, callback) => {
      if (value < this.form.financeFee.createdAt) {
        return callback(new Error('交易时间不能早于保证金生成时间'))
      } else {
        callback()
      }
    }
    return {
      // 校验
      rules: {
        hkDate: [
          this.rulesToolkit.rules.required({name: '交易时间'}),
          { validator: checkTime, trigger: 'blur' }
        ]
      }

5.方法

 methods: {

    /**
     * 提交
     */
    submitForm () {
      this.$refs['formDeposite'].validate(valid => {
        if (valid) {
          this.loading.submit = true
          this.formDeposite.financeCode = this.financeCode
          let financeFee = this.formDeposite
          this.api.deposit.manage.commit(financeFee).then(result => {
            this.loading.submit = false
            this.$message.success(result.data.message)
            this.$router.back()
          }).catch(e => {
            this.loading.submit = false
          })
        }
      })
    }
}