记一个iview回填数字后，判空校验有问题的小坑

小小猿JiaHao

于 2021-10-26 14:59:49 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/jinjiashui/article/details/120972010

前端专栏收录该内容

1 篇文章

订阅专栏

本文讲述了在使用i-formref进行表单验证时，如何修正因回填导致的价格校验错误。重点在于添加数字类型并修复'价格不能为空'的提示，确保修改操作时的正确验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面表单

<i-form ref="formValidate" :model="d" :rules="ruleValidate" :label-width="88">

<Form-item label="价格" prop="price">
    <i-input v-model="d.price" type="float" placeholder="价格"></i-input>
</Form-item>

js校验修改前

//新增、修改的校验规则
ruleValidate: {
    price: [ {required: true,   message: '价格不能为空', trigger: 'blur'} ,
                   {validator: validatePositiveTwoPointNum, trigger: 'change'},
    ],

},

出现问题点：修改操作时表单回填数据，点击保存，校验提示 “价格不能为空”，但断点数据是有的，且数据回填到了输入框，就校验不通过

js校验修改后校验OK

添加type:'float',

//新增、修改的校验规则
ruleValidate: {
    price: [ {required: true, type:'float',message: '价格不能为空', trigger: 'blur'} ,
                   {validator: validatePositiveTwoPointNum, trigger: 'change'},
    ],

},

数字的判空校验，这里必须注明数字类型