el-cascader 表单校验

已于 2023-01-19 10:28:24 修改
阅读量2k 收藏 3
点赞数 1
分类专栏： 前端开发 框架 文章标签： vue.js javascript ecmascript
于 2022-03-14 15:48:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58293192/article/details/123480483
版权

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTgyOTMxOTI=,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTgyOTMxOTI=,size_20,color_FFFFFF,t_70,g_se,x_16 

本身的校验规则elment 好像没有察觉出值的变动,需要在值发生改变时赋值:

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTgyOTMxOTI=,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

开发那点事儿~
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
关于使用element-ui组件化el-cascader表单验证无法通过的解决
qq_51558433的博客
06-01 2379
在做项目的时候，多处要用到级联，所以就想着将他封装成单独的组件
Cascader 级联选择器指定值禁用添加其他参数+清空上一次校验
qq_44552416的博客
03-30 1533
Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们可以通过再递归方法里面再添加循环动态列表判断选中的值等于列表里面值然后赋值生产力值produceValue。每次新增后选中对应值，再点击新增后不让选择之前选中过的数据。（2）Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们需要使用到生产力值的参数值。然后再调用禁用方法里面通过递归循环，获取选中的数据，递归给已经选中的数据添加disabled=true属性；
el-cascader、多级嵌套、引用组件等表单验证
宁
11-17 2138
element ui表单验证
Debug-017-elementUI-el-cascader组件首次选择选项不触发表单的自定义校验
最新发布
LM0916的博客
07-05 933
用的是饿了么的组件。今天维护一个表单校验的时候发现一件事情，就是在表单中使用了 el-cascader组件，希望根据接口返回数据去动态校验一下这里面的选项，符合逻辑就通过自定义的表单校验，不符合就在这一项的下面标红提示。加上之后，就可以在第一次选择el-cascader之后就会主动触发表单中rule里对应“group”的校验，也就解决了第一次不触发的问题，但是为什么第一次回不触发呢？补充一下：这里有一篇之前写过的区分elementUI中区分表单全部校验和单独字段校验的文章，细节在这里面，可以去看看。
el-cascader验证问题
rex.ran
04-28 4298
Vue Element-ui el-cascader FORM表单校验失败 问题描述 表单中 el-cascader 级联选择器, 使用 async-validator 进行校验时明明已经选择了值, 但还是选择失败。 选择值并不能校验通过 解决方案 检查校验对象的 type 属性是否是 ‘array’ (不可大写) 检查prop绑定的值是否是 el-cascader 组件 v-model 绑定的key (如下图) 验证选择值后可正常校验 ...
ElementUi中el-cascader表单验证问题
weixin_38897313的博客
09-07 900
【代码】ElementUi中el-cascader表单验证问题。
Vue2 el-cascader 表单校验明明选择了参数但是不触发rules
Youyzq的博客
03-23 1798
Vue2 el-cascader 表单校验明明选择了参数但是不触发rules
element Cascader 级联选择器使用及表单的校验
逆风优雅的博客
05-09 4916
一、 industryList: [], // 数据来源，数据的回显，应该是个数组的形式，在我的项目中，接口回显的数据为，也是一个数组的形式。 二、 v-model绑定的数据格式： 但是官方给的数据格式是： 因此 通过 :props="industryProps" ，对数据进行处理，使其变为我们想要的数据。在data中对数据处理为： 官方props的描述为： 三、校验 在el-form-item 中通过prop进行校验：校验的规则为： 注意：此处校...
ElementUi中el-cascader验证问题
qq_42586147的博客
06-13 2905
Cascader校验
el-cascader表单校验不生效
02-22
el-cascader是Element UI库中的一个组件，用于实现级联选择器。在使用el-cascader组件时，如果表单校验不生效，可能有以下几个原因： ...以上是el-cascader表单校验不生效的一些可能原因和解决方法，希望对你有帮助。
el-cascader 添加表单校验和添加红点
qq_40668835的博客
09-23 2220
el-form > el-cascader 表单校验和添加红点 <el-form-item label="数据库" prop="F_DbId" :required="true"> <el-cascader v-model="dataSourceForm.F_DbId" size="small" placeholder="请选择数据库" expand-trigger="hover"
elementUI el-cascader 校验不到的处理方法
jyin_的博客
06-09 5355
<el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px"> <el-form-item label="所在省市:" prop="Provincelist"> <el-cascader v-model="form.Provincelist" :options="opt
ElementUI 级联选择器的el-cascader校验，京东前端三面问啥
m0_58397123的博客
04-17 404
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
el-cascader校验的方法
m0_53164768的博客
07-04 562
然后在提交的rules里面方法。这块的位置必须保持一直。
el-cascader 校验不能为空
weixin_42342065的博客
05-09 1731
前言： 由于vue中form表单的检验是否通过是取决于form表单中对应的属性是否有值，有值则无提示信息，无值则有提示信息。 <el-form :model="form" :rules="rules"> <el-form-item label="地区" prop="address"> <el-cascader :props="props" @change="handleCheckData" ></el-cascader>
ElementUI 级联选择器的el-cascader校验
canyi8023的博客
12-03 2087
<el-form-item label="类别" prop="number"> <el-cascader v-model="newData.number" :options="typeChoose" :props="{ expandTrigger: 'hover', checkStrictly: true,value: 'id', label: 'name'}" > </el-cascader&g.
el-cascader级联校验不通过
qq_33911541的博客
05-15 944
el-cascader级联校验不通过
vue中el-cascader必填校验
07-28
在Vue中，要对el-cascader进行必填校验，可以通过以下步骤实现。首先，检查验证规则对象的type属性是否是'array'，确保el-cascader的值是一个数组类型。其次，检查el-form标签中的:model属性是否与el-cascader组件的v-model绑定的对象相同，以确保数据的一致性。然后，检查el-form-item标签的prop属性绑定的值是否与el-cascader组件的v-model绑定的key相同，以确保验证的准确性。最后，手动调用validate方法进行数据验证，可以使用validateField方法来验证单个字段，或者使用validate方法来验证整个表单。例如，可以使用this.$refs\["updateRuleForm"\].validate(() => {})来手动触发验证。这样，当el-cascader的值为空时，就会提示必填信息。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [el-cascader验证问题](https://blog.csdn.net/qq_45813281/article/details/116224900)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [el-cascader回显表单验证不生效](https://blog.csdn.net/oneclarence/article/details/116306551)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

开发那点事儿~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值