最近发现，element-ui表单验证遇到v-if时不生效

比如登录页面可能含有手机号登录和邮箱登录等多种方式

我通过一个属性，比如type来去决定用户使用哪种登录方式，再展示具体表单，发现部分字段无法验证，这是表单复用的一个问题导致。

解决方案有以下3种：

  1. 在v-if的元素(如div等)上加上key值
  2. v-if改为v-show
  3. el-form-item标签前加一个div

element-ui表单验证遇到v-if时不生效的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. vue踩坑：vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  3. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  4. 如何在Vue的项目里对element的表单验证进行封装

    介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...

  5. element自定义表单验证

    element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...

  6. 使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat

    [Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model=" ...

  7. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  8. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  9. Vue element 自定义表单验证(验证手机号)

    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" ...

  10. element ui 自定义异步验证

    之前提到过,axios是一个异步请求,但是很多时候我们都需要同步请求,比如在element的表单验证中需要验证一个用户名是否存在的时候,异步请求好像就不太好用了.前边博客中提到过,这种情况可以用es6 ...

随机推荐

  1. manim边做边学--显函数图像

    在Manim库中,FunctionGraph类是一个核心组件,专门用于在坐标系中绘制函数图像. FunctionGraph的主要作用是将数学函数以直观的图形形式展示出来,使得复杂的数学概念更加容易理解 ...

  2. AtCoder Beginner Contest 357-C

    Problem For a non-negative integer \(K\), we define a level-\(K\) carpet as follows: A level-\(0\) c ...

  3. Web前端入门第 62 问：JavaScript 循环结构注意事项

    HELLO,这里是大熊的前端开发笔记. 循环作为 算法与数据结构 中的基石,JS 与其他编程语言一样,都提供了多种循环结构用于处理数据. for 循环 事物的开端往往都是从最常用的开始,循环结构咱们从 ...

  4. 2022 电赛C题 巡线基础模块代码（带控制）

    巡线功能模块 from maix import camera, display, gpio, pwm class FindLine(): def __init__(self): self.THRESH ...

  5. 算法新手村 Day01

    作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 目录 前言: 算法 算法的分类 几个排序算法 0.两值交换 1.选择排序 动图 思路 代码 2.冒泡排序 动图 思路 代码 3.插入排序 动图 思路 ...

  6. AtCoder Beginner Contest 408 E-F 题解

    E. Minimum OR Path 题意 给你一个 \(N\) 个点 \(M\) 条边的无自环的无向图,第 \(i\) 条边连接 \(u_i\) 和 \(v_i\),权值为 \(w_i\). 在所有 ...

  7. 大模型VS小模型：论国产数据库运维AI Agent的正确打开方式

    作者:孙鹏,大衍(北京)科技有限公司研发工程师 首先为大家推荐这个 OceanBase 开源负责人老纪的公众号 "老纪的技术唠嗑局",会持续更新和 #数据库.#AI.#技术架构 相 ...

  8. HyperWorks分析模型的建立与边界条件施加

    在HyperWorks完成了基本的网格剖分后,还需要赋予模型各类与求解相关的信息,方能最终生成可以递交求解器计算的输入文件.分析模型的建立与载荷及边界条件的创建包括以下内容: -定义待输出的目标求解器 ...

  9. WHUWC 2025 游寄

    一沙一世界(NOI2022 in Shanghai 应援) 她是清晨告别洋流启程的沙砾 同忽闪漂流瓶 将白日梦唤醒 好奇目光激发导带微弱的磁极 从此把全世界吸引 她看故事书无聊将那零和一堆砌 牛郎还不 ...

  10. 3.Java Spring框架源码分析-AOP-AnnotationAwareAspectJAutoProxyCreator是在什么时候起作用的

    目录 1. 继续研究BeanPostProcessor的postProcessBeforeInstantiation和postProcessAfterInitialization 2. 创建其他单实例 ...