iview inputNumber 输入框有值但是校验失败

表单校验的时候,输入输入的数字,但是表格依然校验失败。原因:校验的时候,是先执行校验的回调函数,再执行修改赋值。 可以通过打印验证是否是这种情况:
在这里插入图片描述
很明显,获取修改后值的方法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>

我们知道了原因,就很好修改了,直接将上面的注释的代码放开就可以了,让校验发生赋值之后。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_39818813/article/details/121837785
今日推荐