elementUi 中表单验证时，验证规则一直被触发问题

最新推荐文章于 2024-09-25 15:32:00 发布

CHY__YHC

最新推荐文章于 2024-09-25 15:32:00 发布

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_45982960/article/details/123084448

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

问题描述：在一个表单中，对表单中的某一项进行验证，如下，该项验证规则为必填，但是即使填写后验证还是会报该项未填。

<el-form-item class="GoodsPrice" label="商品价格:" prop="goodsPrice">
    <el-input v-model="AddGoodsForm.goodsOriginalPrice" placeholder="商品价格"></el-input>
</el-form-item>

// 验证规则：此项必填
goodsPrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],

报错原因：验证规则的 goodsPrice 和 el-input 框绑定的 goodsOriginalPrice 名不一样，则会导致验证出现问题。因此，需要把两者改为一样的属性名。

如下：把 prop 中 goodsPrice 和 v-model 中的 AddGoodsForm.goodsPrice，goodsPrice设置为一样的变量名就可以了。

<el-form-item class="GoodsPrice" label="商品价格:" prop="goodsPrice">
    <el-input v-model="AddGoodsForm.goodsPrice" placeholder="商品价格"></el-input>
</el-form-item>