elementUI表单验证填坑之路（二）

最新推荐文章于 2024-09-19 16:06:40 发布

程序媛蛋总

最新推荐文章于 2024-09-19 16:06:40 发布

阅读量1.2w

点赞数

分类专栏： elementUI

本文链接：https://blog.csdn.net/AiNiBuLiBuQi/article/details/80842409

版权

本文主要探讨了在使用Element UI进行表单验证时遇到的prop赋值问题，强调了prop的正确写法对于避免'Error: please transfer a valid prop path to form item!'错误的重要性。内容提示prop的值应当与rules中定义的验证规则名称保持一致。

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

表单验证prop赋值的坑

表单是由列表组成的如下图中表单所示：
![这里写图片描述](https://img-blog.csdn.net/20180628135529941?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpTmlCdUxpQnVRaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
动态添加行中的prop写法就有讲究了，看源码不难发现使用了js对象通过属性路径获取属性值的办法

<div  v-for="(domain, index) in CostCuisine.costCuisineIngredient">
    <el-form-item :label-width="formLabelWidth"
        label=&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序媛蛋总

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ElementUI 表单单个验证

阿狸演绎的博客

03-16

6242

ElementUI 表单单个验证今日在工作遇到一个问题,需求是这样的,总共有12个字段,其中第四个字段如果填写了,第五个,第六个和第七个就非必填,如果第五个,第六个第七个填了,第四个就非必填实例图如果区域选择的是北京,则只要填写前三项就可以, 如果区域选择的是上海或者不选,则校验的是全部如下图解决方法方案一简单粗暴,好实现,技术含量低直接将表单按字段拆分开,分成两个或者三个的表单,根据条件,校验需要的表单. 方案二 elementUI官方在表单校验文档中已经说明,取消单个校验的方法结合这

Error in event handler for "el.form.change": "TypeError: value.getTime is not a function"报错解决方法

tumi

11-20

1846

遇到此问题，可能你会想到将rules里面的type转换成string类型，但有时并不能解决，如何解决呢？先看下面代码： html： <el-form-item prop="startDate"> <el-date-picker type="date" placeholder="选择日期" v-model="startDate" :pi...

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

[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘validate’ of undefined“表单提交验证报错

qq_51720257的博客

05-16

1743

vue2+element-ui表单提交验证报错

elementUI表单验证报错：Error in event handler for “el.form.blur“: “Error: Unknown rule type name“ found in

wys997的博客

09-09

9040

elementUI是一款非常好用的基于vue脚手架的后端框架，表单验证非常好用。但是，今天我爱模板网在使用它进行日期验证的时候出了问题，报Error in event handler for "el.form.change": "TypeError: value.getTime is not a function"的错误：代码如下： js验证码的代码：从上面的错误可以看出，应该是类型出错。可能是：elementUI自带的格式转换后会将绑定值转为字符串，而校验规则中的【type...

Element-ui的子组件的el-from校验规则要跟随父组件的某个值发生变化

最新发布

m0_71185989的博客

09-19

267

出现的问题：直接定义 rules 的值，无法监听到父组件中 isDeclaration 值的变化。解决办法：定义的 rules 使用 computed 计算属性 return 出去。因为我父组件表单的验证规则也会根据这个值发生变化，所以就写了一个计算属性。子组件我是直接把这个计算属性通过 props 传递过去了。

[Vue warn]: Error in event handler for “el.form.blur“: “TypeError: callback is not a function“解决

Sensation_cyq的博客

11-19

3864

allback的简单理解调用一次callback相当于调用一次函数，比如： function f(x) { console.log(x) } function testCallBack(callback) { //关键字callback，表示这个参数不是一个普通变量，而是一个函数 const reg = /^[1-9]*[0-9]?(\\.[0-9]*)?$/; if(value==''||value==undefined||value==null){ callback();/

[Vue warn]: Error in event handler for "el.form.blur": "TypeError: callback is not a function"解决

qq_39946015的博客

03-26

1万+

callback的简单理解调用一次callback相当于调用一次函数，比如： function f(x) { console.log(x) } function testCallBack(callback) { //关键字callback，表示这个参数不是一个普通变量，而是一个函数 const reg = /^[1-9]*[0-9]?(\\.[0-9]*)?$/; if(val...

vue表单自动填充报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘id‘)“

weixin_73594971的博客

11-08

1055

我是一名大二的计科女大学生，希望大家相互沟通交流，学习进步哦o(*￣▽￣*)ブ~

vue elementui form表单验证的实现

10-17

表单验证是任何Web应用中不可或缺的功能，它保证了用户提交的数据是符合预期格式的。本文将详细介绍如何在Vue项目中使用Element UI来实现表单验证。 Element UI提供了丰富的表单组件，例如 `<el-form>`、`...

Vue ElementUI之Form表单验证遇到的问题

08-29

Vue ElementUI之Form表单验证遇到的问题 Vue ElementUI是一个基于Vue.js的组件库，提供了许多实用的UI组件，其中Form表单验证是一个常见的问题。本文将主要介绍Vue ElementUI之Form表单验证遇到的问题，并提供解决...

详解ElementUI之表单验证、数据绑定、路由跳转

08-30

ElementUI表单验证、数据绑定、路由跳转详解 ElementUI是一个基于Vue.js的组件库，为开发者提供了丰富的UI组件和功能强大的表单验证机制。本文将详细介绍ElementUI的表单验证、数据绑定、路由跳转的实现方法和原理...

vue elementUI 表单嵌套验证的实例代码

12-30

element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证 客户名称: size=small prop=belongId> <el v-show=false v-model=form.belongId></el> <ComSelectorCustom

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

热门推荐

coinisi_li的博客

09-28

3万+

背景：1.在做vue项目时，在功能弹框中，想实现新增内容。 2. 报错原因是要触发menuCheckall组件后，才可以提交，因为不触发menuCheckall的时候dom未加载，没有编译渲染进dom里面。 1.使用了 this.form.menuIds = this.$refs.menuCheckall.$refs.tree.getCheckedKeys(); 其中menuCheckall是子组件。

vue报错 Error in event handler for “change“: “TypeError: Cannot read properties of null (reading ‘0‘)“

来都来了

01-31

906

methodsgettimerangeDate//定义开始结束时间this0;this1;</

前端解决 “TypeError: Cannot read properties of undefined (reading ‘from‘)的情况

m0_53980935的博客

07-28

1419

首先，TypeError错误消息提到无法读取未定义属性'form'。变量，并使其成为响应式对象，可以使用Vue的。来引用表单数据，但在Vue 3中，其次，在函数中，我使用了。

Error in v-on handler: “TypeError: Cannot read property ‘value‘ of undefined“

lgx211

04-14

1万+

Error in v-on handler: “TypeError: Cannot read property ‘value’ of undefined” 报错如下所示，即在运行Vue项目时出现了上述错误，出现该错误的原因是其容器还未生成就对其进行了初始化所造成的。首先检查有没有如下操作 //原先取dom的操作 document.getElementById('textarea'); //改...

el-form-item 设置 prop 报错：please transfer a valid prop path to form item!

sumimg的博客

08-09

580

【代码】el-form-item 设置 prop 报错：please transfer a valid prop path to form item!

Error in event handler for “click“: “TypeError: Cannot read property ‘validate‘ of undefined“

m0_60204745的博客

09-26

5070

正确的写法是这样： ref="dataAddForm" ref="" 这个双引号之内，不能有单引号。

vue+elementUI表单及图片上传验证实战教程

1. **表单验证** - 使用`el-form`组件创建表单，通过设置`el-form-item`的`prop`属性与表单控件的`v-model`绑定，实现数据双向绑定。例如： ```html 姓名：" prop="name"> ;" v-model="addKeyPersonForm.name" ...