el-form表单中对不同的下拉项（el-select）的选择，提交时的校验提示问题的解决 —— vue

最新推荐文章于 2024-08-04 22:42:27 发布
最新推荐文章于 2024-08-04 22:42:27 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： element-ui 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46419373/article/details/118418018
版权

—— 上篇博客：弹窗封装

前言

在写这篇博客前，大家可能对我上篇的博客（自定义弹框）的使用还有点迷茫，因此接下来我会首先根据我上一篇的弹框封装来作为这篇博客的开头

一、弹框使用

1、效果
在这里插入图片描述
点击新增会有一个弹框
在这里插入图片描述
2、代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

最低0.47元/天 解锁文章
_仰望星空的你
关注
专栏目录
elementUI form表单 el-select多个下拉选不可重复选择
weixin_68658847的博客
01-12 762
elementUI form表单 el-select多个下拉选不可重复选择
Vue3+ Element-plus，使用el-select 循环多个下拉选择框时，选项option不能重复被选；选择后的option，在别的下拉中显示禁用状态
Shivy_的博客
04-17 1341
Vue3+Element-plus，循环多个下拉框时，option不能重选
JS判断下拉选择框未选，则弹出警告窗
qq_40618664的博客
08-31 1425
if (document.getElementsByName(“select”)[0].selectedIndex == 0) { alert(“请您选择分类”); }
单个form表单内，不同情况显示的不同选项的单选框或多选框的情况下，判断单选框是否存在未选择一个选项情况，并进行提示。
weixin_43803387的博客
10-12 547
单个form表单内，不同情况显示的不同选项的单选框或多选框的情况下，判断单选框是否存在未选择一个选项情况，并进行提示。
el-form表单校验----循环el-select控件元素手动触发校验
最新发布
qq_43738982的博客
08-04 215
遇到多个选择下拉框校验问题，尝试普通自动校验无果。
el-form和el-select的使用
qq_43665890的博客
03-11 2288
**1、el-form属性和事件 :model=“addForm” 绑定表单数据 :rules="addFormRules"绑定自定义校验规则 ref=“addFormRef” 用于表单校验 // 监听添加任务对话框的关闭事件 addDialogClosed () { this.$refs.addFormRef.resetFields() }, 2、el-input数据绑定 上图三处需要一致，prop="taskName"不能省，否则重置表单无法生效。可以直
VUE 表单中第二个下拉框要根据第一个下拉框数据进行选择（必须先选择第一个，才能选择第二个）
weixin_44443380的博客
01-08 1374
2、当选择完第一个下拉框后，触发change事件。第二个下拉框变为可以选择，同时清除 ‘请先选择第一个下拉框’ 的校验提示。1、当第一个下拉框未选择数据时，第二个下拉框先disabled，并校验提示请先选择第一个下拉框。3、对第二个下拉框的校验提示语句更新。
下拉选择器选择进行规则校验
qq_44170622的博客
12-29 322
{ required: "true", message: "请选择企业名名称", trigger: ['blur','change'] }, 在这里插入图片描述
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
详解element-ui设置下拉选择切换必填和非必填
12-10
在Element-UI中，开发Web应用时常会遇到需要动态调整表单验证规则的情况，比如一个下拉选择框根据用户的选择，使得某个输入框变为必填或非必填。本篇文章将详细讲解如何实现这一功能。 首先，我们来看一下具体的...
【vue】element-ui的form数组表单验证（循环表单验证）
热门推荐
qq_39576711的博客
03-30 1万+
基于vue2.0的element-ui的form表单验证比较简单，但是有些同学可能对于数组类型的表单验证无从下手，这里我基于一个我自己项目中的例子，展示一下怎么进行数组的表单验证。 项目截图： 上代码,为了让大家看起来比较清晰，我删掉了无关的代码： <template> <div class="create_send"> <el-form ref="refForm" :model="formData" :rules="rules"> <el-
el-form表单输入框根据另一输入框的值添加必填校验
Gpointy的博客
12-29 660
两个表单，第二个表单的单选框需要根据第一个表单下拉框中的值去动态添加是否必选检验。
【vue3+elementuiplus】el-select下拉框会自动触发校验规则的最强解决方案
bbt953的博客
08-02 1万+
el-select下拉框会自动触发校验规则的最强解决方案
解决el-form打开弹框时就进行表单验证问题
m0_57997609的博客
01-30 2161
解决el-form打开弹框时就进行表单验证问题
iview下拉框多选，重置表单后，下拉框触发校验提示错误信息
Kobeloveu
02-24 453
如出现标题所述情况，请把这个字段在重置函数调用之前，把该字段删除掉。
vue项目开发：element的el-form表单rules如何对input和select添加号码校验
weixin_39277183的博客
08-22 5220
在项目开发的时候，一般表单检验都是做非空检验即可，但是难免会遇到证件号码或者手机号校验，通常我们都要调用公共js进行实现，input校验较为简单，但是select如果没有用过的还是会有点头疼。下面我将对我在项目开发的一部分校验跟大家分享一下。 首先肯定要准备好公共js（validate.js） 基本结构是必要的:rules="formRules" 和prop="dsrmc" <el-form ref="editAdminForm" ..
el-form校验多个下拉框
L221545的博客
07-19 969
el-form校验多个下拉框。
【vue3+elementuiplus】el-select下拉框会自动触发校验规则
qq_33225414的博客
05-22 1085
在关闭弹层事件中，我做了resetfileds，resetfileds置空form表单，其实本质上也是一种改变select的操作，故而触发了select的change事件，在第二次打开新增弹层时，select的值为“ ”，所以才会触发表单校验规则。因此，我在el-dialog上面加了销毁属性，当dialog关闭后，整个组件就被销毁，打开新增弹层时已经是一个新dom，就不会出现bug了。
el-select初始化页面自动触发校验
yy_demo的博客
08-23 692
后来搜到因为初始化的时候绑定的数据不能为null，我就在data中表单绑定的数据里加上了select的数据为空数组，但是我还是想不明白，我的两个下拉框都是在空对象里面，为什么一个被触发一个没有，突然发现被触发的漏写了placeholder，加上之后初始化的时候就不会触发校验了。el-cascader我没有找到满足我要求的，我就想用两个下拉框去实现，先选择组然后通过组el-select绑定的change事件去获取用户的下拉列表数据，我发现初始化的时候用户的下拉框被触发了校验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值