表单校验的时候,输入输入的数字,但是表格依然校验失败。原因:校验的时候,是先执行校验的回调函数,再执行修改赋值。 可以通过打印验证是否是这种情况:
很明显,获取修改后值的方法111111打印在后,校验逻辑2222打印在前。
<template>
<Form ref="form" inline :model="form" :label-width="120" :rules="rules">
<FormItem label="汇款金额" prop="money">
<InputNumber v-model="form.money" :min="0.01" :activeChange="false" @on-change='changeINput'></InputNumber>
</FormItem>
</Form>
</template>
<script>
export default {
name: 'ReOrderModal',
data() {
const validMoney = (rule, value, callback) => {
console.log(this.form.money,2222)
// setTimeout(() => {
if (!this.form.money) {
callback('请输入汇款金额')
} else {
callback()
}
// }, 0)
}
return {
form: {
money: null,
},
rules: {
money: {
required: true, validator: validMoney, trigger: 'blur' },
},
}
},
created() {
this.selectBankConfig()
},
methods: {
changeINput(e){
console.log(this.form.money,111111)
},
}
}
</script>
我们知道了原因,就很好修改了,直接将上面的注释的代码放开就可以了,让校验发生赋值之后。