脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → ElementUI表单验证规则动态失效

Element UI表单验证规则动态失效问题的解决办法

 更新时间：2023年09月30日 09:30:17   作者：程皮  
这篇文章主要给大家介绍了关于Element UI表单验证规则动态失效问题的解决办法,Element UI提供了强大的表单验证功能,可以轻松地对表单进行验证,需要的朋友可以参考下

Element 版本：v2.15.3

问题背景

如下代码所示：有一个上传文件的 input 组件，在更新的时候，如果不上传文件表示不更新，如果要更新则点击 「重新上传」按钮将上传组件显示出来

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <!-- 这个字段不是必须的没有写 prop -->
  <el-form-item v-if="!updateDocument" label="文档">
    <el-button @click="updateDocument = true">重新上传</el-button>
    <base-tips margin-left="15px">如需变更请重新上传文档</base-tips>
  </el-form-item>
  <!-- 要更新的话：这个字段要求必须，写 prop  -->
  <el-form-item v-if="updateDocument" label="文档" prop="document">
    <input
           :accept="supportFilesType"
           ref="documentFile" type="file" @change="documentFileChange"/>
  </el-form-item>
</el-form>

也就是如上图：不更新的话，该字段不是必须的，提交的时候就不会被校验，如果更新的话，就要让这个字段为必填项。

上述代码：从页面上看是正常的，有前面那个红色的 * 号，但是在提交的时候，并没有触发验证。

解决方案

首先：查看表单组件的信息，最终在 Field 这个属性下发现了问题

console.log(this.$refs.form)
  1. 进入页面的时候，Field 中显示的字段数量不包含 document，因为进入页面默认是不更新
  2. 切换到更新状态，Field 中的字段数量并没有变更，那么问题就出现在这里了

这种情况的最主要原因是：表单组件没有触发重新渲染，解决方案靠谱的有：

  1. 在 el-form-item 上增加 key 属性，也就是 vue 中的 key
  2. 在 el-form-item 上手动写上指定的，rules
<!-- 写上 prop，并且手动指定 rules，由于需要不校验该字段，设置一个规则 required:false  -->
<el-form-item v-if="!updateDocument" label="文档" prop="document" :rules="[{required:false}]">
  <el-button @click="updateDocument = true">重新上传</el-button>
  <base-tips margin-left="15px">如需变更合同请重新上传文档</base-tips>
</el-form-item>
<!-- 写上 prop，由于需要验证该字段，直接指向原来的 rules 中的规则-->
<el-form-item v-if="updateDocument" label="文档" prop="document" :rules="rules.document">
  <input
         :accept="supportFilesType"
         ref="documentFile" type="file" @change="documentFileChange"/>
</el-form-item>

总结 

到此这篇关于Element UI表单验证规则动态失效问题解决的文章就介绍到这了,更多相关ElementUI表单验证规则动态失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Antd form表单的使用、设值、取值、清空值方式

    Antd form表单的使用、设值、取值、清空值方式

    这篇文章主要介绍了Antd form表单的使用、设值、取值、清空值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • vue中巧用三元表达式解析

    vue中巧用三元表达式解析

    这篇文章主要介绍了vue中巧用三元表达式解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 如何使用Vue3构建一个图像画廊(支持图片上传)

    如何使用Vue3构建一个图像画廊(支持图片上传)

    这篇文章主要给大家介绍了关于如何使用Vue3构建一个图像画廊(支持图片上传)的相关资料,Vue画廊这是vue编写的图库应用程序,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 基于vue实现一个神奇的动态按钮效果

    基于vue实现一个神奇的动态按钮效果

    今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-05-05
  • vue实现拖动调整左右两侧容器大小

    vue实现拖动调整左右两侧容器大小

    这篇文章主要为大家详细介绍了vue实现拖动调整左右两侧容器大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue3中引入scss文件的方法步骤

    Vue3中引入scss文件的方法步骤

    这篇文章主要给大家介绍了关于Vue3中引入scss文件的方法步骤,在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择,需要的朋友可以参考下
    2023-08-08
  • vue3.0响应式函数原理详细

    vue3.0响应式函数原理详细

    这篇文章主要介绍了vue3.0响应式函数原理，Vue3的响应式系统可以监听动态添加的属性还可以监听属性的删除操作，以及数组的索引以及length属性的修改操作。另外Vue3的响应式系统还可以作为模块单独使用。下面更多介绍，需要的小伙伴可以才可以参考一下
    2022-02-02
  • 关于Vue3中defineProps用法图文详解

    关于Vue3中defineProps用法图文详解

    在vue3中组件传参有很多种方式,和v2大差不差,但是有的地方还是有很多的区别,下面这篇文章主要给大家介绍了关于Vue3中defineProps用法的相关资料,需要的朋友可以参考下
    2022-11-11
  • vuex中使用modules时遇到的坑及问题

    vuex中使用modules时遇到的坑及问题

    这篇文章主要介绍了vuex中使用modules时遇到的坑及问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue3+ts使用APlayer的示例代码

    vue3+ts使用APlayer的示例代码

    这篇文章主要介绍了vue3+ts使用APlayer的示例代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08

最新评论