el-form 表单校验有时触发有时不触发

Vue使用v-if控制el-form-item需加key属性

原创于 2024-11-21 18:49:06 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

使用v-if来控制el-form-item是否显示的时候，或者控制具体显示哪一种情况的时候，一定要给el-form-item写上key属性，不加key 高度会改改变从而导致检验不生效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一枚前端小卡拉米

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue el-form 遇上 v-if，表单校验不生效问题

且听风吟的博客

08-18

8958

el-form遇上v-if，表单校验不生效问题

el-动态表单的校验不触发/只触发了部分项

weixin_45286211的博客

10-12

800

到了这里，多半就可以确定的是元素更新的问题了，在el-form-item外套一层div，进入第二步后元素布局就与第一步不同，从而刷新了所有元素。但是，如果同时套上div，那么相对来说el-form中el-form-item的结构就没有发生变化，就产生了同样的问题，因此套div的方式并不可取。想知道发生了什么导致这种情况，于是去看el-form的源码，发现校验的触发数量，与其属性fields有关系，如图。通过对比重构前的代码，发现和之前的一样，在el-form-item外套一层div就可以了。

参与评论您还未登录，请先登录后发表或查看评论

el-form表单验证不触发？检查el-form-item上是不是加了prop属性

weixin_65260966的博客

06-13

346

#el-form-item设置rules后验证不生效 #el-form的表单验证不生效 #设置的rules不生效

el-form明明给表单对象属性进行了赋值，但为什么当提交表单时仍然校验失败呢？？？

m0_52872381的博客

04-08

1426

把相应的校验数据改为。

vue中使用el-form表当校验失效，表单校验不起作用

qq_40462931的博客

08-30

683

我这个vue文件中存在多个表单，通过v-if判断，来依据步骤显示不同的表单，其中一个表单也有表单校验。那个表单校验是没问题的，看文章是因为表单渲染问题，表单没有从新渲染所导致的。今天开发中遇到这样一个问题，给签约功能表单增加表单校验，给每个表单输入项增加必填校验，结果只有最后一个手机号有必填校验，其他都失效了，没有起作用。开始我以为校验项是否哪里写错了，我一一对比，发现并没有哪里有问题，就是不生效，奇怪了。解决方法就是给每个表单增加一个不同的key，增加后问题确实解决了。

elementUI form表单页面初始化时就自动校验了

qq_42440919的博客

12-28

6326

form表单自动校验

el-form表单实现校验

weixin_43589681的博客

06-28

630

前端表单实现， rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。点击提交时验证表单数据。

element-ui的表单校验；el-form表单校验；el-form表单自定义校验；手机号校验；车牌号校验；车牌号正则校验；手动校验表单某一项；手动清空表单的某一项校验结果

i_am_a_div的博客

08-31

1639

一、基本属性认知： 1. required: true 会有 * ，但仅是触发最后点击提交按钮时，校验某一项位必填；与输入事件或者选择或者失焦时候怎么校验无关（这时候的校验取决于是否写了具体的校验规则）为false则提交时可不填(默认false) 但是同时取决于validator的callback()返回是空还是返回报错提示 2. validator: 自定义校验方法需要声明变量和错误提示 3. trigger: 触发校验方法 4. message: 错误提示 5.

【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）

前端知识分享喵

06-07

4677

前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。

elemeng-ui 中el-form 表单如何校验

weixin_57983561的博客

06-08

791

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。一、首先我们引入element 1、下载 npm i element-ui -S 2、引入我们这里直接完整引入了，按需引入请看element官网在main.js中写入以下内容 import Vue from 'vue'; import ElementUI from 'element-ui'; import 'ele

elementui表单校验遇到的问题

qq_36877078的博客

02-16

2104

项目有，有时候表单的校验规则复杂，需要自定义关键代码如下 // html代码部分 <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="评估净值"> <el-input v-model="form.asPgjz" prop="asPgjz"></el-input> </el-form-item> </

el-form的rule无法校验（没有效果）的几个注意点

weixin_42554373的博客

07-02

4055

【代码】el-form的rule无法校验（没有效果）的几个注意点。

el-form rules表单验证失效问题解决

Ahuuua的博客

11-24

9909

el-form-item中prop属性必须要有才能找到需要验证的字段，另外prop需要与el-input中v-model的参数名称一致，否则会导致rules功能消失 @click中的事件需传入表单名（ref的名称），如@click=submit('taskForm')，js部分点击事件使用方式 submit(taskForm){ this.refs[taskForm].validate(valid=>{ if(valid){} else{} ..

el-form验证问题

Zing_ing的博客

01-13

1021

el-form 的 model 是 formData，那么 el-form-item 中所有需要校验的表单的的 model 也必须是 formData.xxx ，即 formData 对象的直接属性。需要注意的是，如果要用 rules 进行表单校验，那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。

uniapp表单验证

weixin_44042792的博客

04-25

9839

表单验证不触发解决办法第一个参数传入当前表单组件所在的 name，同当前父组件uni-forms-item绑定属性name的值第二个参数传入需要校验的值，内置组件可以通过$event.detail.value获取到组件的返回值，自定义组件传入需要校验的值即可第三个参数传入uni-forms组件绑定属性ref的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个uni-forms可忽略 1：直接在input中加入@input="binddata('email',$...

【form表单校验】使用el-form表单校验数组时，change和trigger无法触发校验的解决方案

优快云wangyi的博客

12-15

3383

原理：change和trigger依赖于组件输入input的事件，数组当然没有相关事件，所以需要监听数组长度，并手动告知form-item，你的数组改变了，需要重新校验。给form-item加上ref。

el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法

您的博客

03-27

1787

el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法

【element-ui】form表单初始化页面如何取消自动校验rules

小墨鱼的前端问题录

08-02

4094

【代码】【element-ui】form表单初始化页面如何取消自动校验rules。

element-ui 表单的验证不生效可能有以下几种原因：

qq_70036866的博客

06-20

4495

表单组件没有加入到 el-form 中：element-ui 的表单验证是基于 el-form 组件的，如果没有将表单字段的组件包裹在 el-form 中，验证规则也不会生效。在自定义校验规则中，需要通过调用 callback 函数来返回验证结果，如果验证通过，则调用 callback()，否则调用 callback(new Error('错误信息'))。这里的 rules 属性中的 key 值需要与 form 对象中的字段名一致，否则验证规则不会生效。

el-form 表单校验只在提交时触发

最新发布

01-24

### 设置 `el-form` 表单校验仅在提交时触发为了使 `el-form` 的表单校验只在提交时触发而不是实时触发，可以通过调整组件属性以及控制验证逻辑来实现这一目标。具体来说，在定义 `el-form-item` 组件时不启用即时校验功能，并通过自定义按钮点击事件调用整个表单的验证方法。 #### 关键点： - 不给 `el-form-item` 添加 `rules` 属性中的 `trigger` 字段，默认情况下会根据输入框类型自动决定何时触发校验。 - 使用 `<el-button>` 或其他方式创建一个用于提交表单的按钮。 - 当用户点击此按钮时手动执行完整的表单校验流程。下面是一个具体的代码示例[^1]： ```html <template> <div class="form-container">  <el-form :model="ruleForm" ref="ruleFormRef" status-icon label-width="80px">  <el-form-item prop="username"> <label>用户名</label> <el-input v-model="ruleForm.username"></el-input> </el-form-item>  <el-form-item prop="password"> <label>密码</label> <el-input type="password" v-model="ruleForm.password"></el-input> </el-form-item>  <el-form-item> <el-button @click.prevent="submitForm('ruleForm')">立即创建</el-button> </el-form-item> </el-form> </div> </template> <script setup lang="ts"> import { reactive, ref } from 'vue' import type { FormInstance } from 'element-plus' const ruleFormRef = ref<FormInstance>() const ruleForm = reactive({ username: '', password: '' }) // 自定义校验规则 const rules = { username: [ { required: true, message: '请输入用户名', trigger: ['blur'] }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ['blur'] } ], password: [ { required: true, message: '请输入密码', trigger: ['change'] }, { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: ['change'] } ] } if (ruleFormRef.value) { ruleFormRef.value.clearValidate() } function submitForm(formName:string){ if (!ruleFormRef.value) return; ruleFormRef.value.validate((valid:boolean)=>{ if(valid){ alert('submit!'); }else{ console.log('error submit!!'); return false; } }) } </script> ``` 在这个例子中，当页面加载完成后不会立刻对任何字段进行校验，只有当用户点击“立即创建”的时候才会启动一次全面的校验过程并给出相应的反馈信息。