要素の送信はリクエストをトリガーしません-カスタムチェックはreturn関数を書き込みません。。。

この場所の小さな新人はピットを2回踏んだ、oooooo ...

要素+ビュー

これはフォーム送信イベントです。フォームにカスタムチェックがあります。チェックは条件を満たし、コンソールはエラーを報告しませんが、リクエストはトリガーされません。これはなぜですか?

最初はメソッドの書き方の問題だと思っていましたが、そうではありませんでした、ははは

その理由は、カスタム検証に入るときにcallback()関数がないため、カスタム検証にcallback()戻り関数がないためです。

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

覚えておいてください!!!

通関手続きには返品機能が必要です!!!
1。「OK」ボタンをクリックします

 <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 () {
  // 提交表单
      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
          })
        }
      })
    }
}

 

おすすめ

転載: blog.csdn.net/qq_40055200/article/details/106835534