この場所の小さな新人はピットを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
})
}
})
}
}