element-ui的form表单校验踩坑

最新推荐文章于 2024-05-22 10:38:57 发布

早起的小笨鸡

最新推荐文章于 2024-05-22 10:38:57 发布

阅读量1.2k

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_47783830/article/details/108146064

版权

本文记录了在使用Element-UI时遇到的一个表单校验问题。在修改和新增功能共用同一表单的情况下，由于验证规则配置不当，导致控制台报错。错误信息表明form表单验证在编译时找不到规则项。解决方案是确保有验证规则的字段放置在前面。此外，还解决了表单在dialog关闭后重新打开时仍保留上次校验结果的问题，通过调用`this.$refs.form.clearValidate()`在dialog关闭时结束校验。

摘要由CSDN通过智能技术生成

今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。
管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码：

这是我改完之后故意写错的问题：

  <el-form
        :ref="fuleCalorificForm"
        :rules="rules"
        label="left"
        :model="fuleCalorificForm"
        label-width="100px"
      >
     //注意此处 ，这个项是验证项
        <el-form-item label="ID" prop="id" v-if="NewfuleCalorific">
          <el-input v-model="fuleCalorificForm.id" :disabled="NewfuleCalorific"></el-input>
        </el-form-item>
        //此项不需要验证
        <el-form-item label="名称">
          <el-input v-model="fuleCalorificForm.name"></el-input>
        </el-form-item>
        //此项为验证项
         <el-form-item label="