element表单选择器失去焦点的表单校验

最新推荐文章于 2024-05-27 14:49:48 发布
最新推荐文章于 2024-05-27 14:49:48 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47410017/article/details/120525990
版权
本文探讨了在Element UI中，为何表单选择器在失去焦点时不会触发预期的校验问题。原因在于点击选择器后，失去焦点的是select而非item。解决方案是直接在select上绑定失焦事件，并在select失去焦点时调用父组件的校验方法，而不是失焦校验方法。
摘要由CSDN通过智能技术生成

element表单选择器失去焦点的表单校验

在这里插入图片描述

为什么会出现这个问题？

我们给item和select都绑定上失去焦点事件，我们来打印一下结果看看是1还是2

<el-form-item @click="aaa" label="活动区域" prop="region"  @blur="ningmengla(1)">
	<el-select v-model="ruleForm.region" placeholder
最低0.47元/天 解锁文章
柠檬啦灬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ElementUI框架 el-input和el-select组件失焦问题
weixin_43829905的博客
01-08 6210
ElementUI框架 el-input和el-select组件失焦问题ElementUI框架 el-input和el-select组件失焦问题 ElementUI框架 el-input和el-select组件失焦问题 el-input，el-select添加filterable属性后,如果都是打开一个弹窗页面，这两个组件的焦点事件并没有取消，就会出现如下问题（就是选择的下拉框会和弹窗同在一个z-index上，都是因为没有失焦引起的，Bug重现步骤：el-select添加filterable属性，选择值后，
基于VueElementUI快速创建生成表单进行数据校验获取表单数据
08-10
Element UI提供了一系列的表单组件，如`el-input`（输入框）、`el-select`（选择器）、`el-checkbox`（复选框）等，这些组件可以帮助我们快速构建表单。例如，你可以这样使用`el-form`和`el-form-item`来创建一个...
el-select失去焦点触发表单的必填校验
weixin_47813845的博客
05-25 544
【代码】el-select失去焦点触发表单的必填校验。
element ui 的el-input输入一个字后失去焦点，需重新点击输入框才能再次输入
最新发布
qq_45067263的博客
05-27 2076
我是form表单嵌套表格，里面的el-input输入框，输入第一个值的时候会突然失去焦点，需要再次点击输入框才能正常输入，原因是table的key值，需要改成正常的index即可，如果你是循环的，也改为index就行。
Element中如何对el-select进行失焦校验
乐夫天命兮的博客
03-29 5244
想要实现的效果是当选择框失去焦点的时候会显示出校验提示，解决的办法如下： 因为使用的是element中的el-select组件，所以可以根据框架中提供的校验方式来进行校验 1、首先在el-form上加上rules属性并在data中进行定义： 2、在下拉选择框中定义一个失去焦点事件： 3、利用表单组件示例中的方法： handleChangeSelect(key, value) { this.$refs.ruleForm[value ? 'clearValidate' : 'validateField.
Element表单输入框失焦向服务端验证(Vue实现)
布克吉的博客
09-18 637
主要原理通过rules中的validator 函数回调实现，CheckAttributes为接口函数，根据请求结果判断输入框内容是否已存在，再通过callback(new Error('数据已存在的提示词')))：无论返回结果是什么，都要加上else{ callback() } 形成一个闭环，前言：一般情况下，表单的作用为：输入数据->正则验证格式->提交到后端数据验证。而遇到输入项较多时，如果费老大劲把数据填完，提交返回。本文介绍表单输入数据，失焦立即验证内容。
element-ui 表单校验，失去焦点/框内值改变，校验
szzlh123456789的博客
04-01 779
前提：在el-form表单中，框中有值，失去焦点或者框内值改变的时候，校验提示，依旧没有消失el-select校验失效问题。层级太深了，form检测不到addform的变化，这个时候要么change事件里面强制更新dom触发（视图更新）form表单里面，el-select会出现失效的情况，尤其是我这个el-foem-item 里面又嵌套了。奇怪的是，我表单里面有三个el-select，其他两个生效了，只有另外一个没有生效。
element 表单的input循环生成，并可单个input失去焦点单个验证并保存； （多个表单实例）...
weixin_34391854的博客
07-10 610
<div class="box_item"> 　　<el-form ref="aList" :model="form" :rules="formRules" label-width="210px"> 　　　　<el-form-item class="itemSty" 　　　　　　v-for="(items, index) in form.aList" 　　　...
详解element-ui中表单验证的三种方式
10-16
在使用Element-UI开发时，表单验证是必不可少的功能之一，它可以帮助我们保证用户输入的数据是正确和有效的。本文将详细介绍Element-UI中表单验证的三种常用方式，并通过示例代码进行说明。 首先，Element-UI提供的...
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
动态表单校验的核心在于能够在用户与表单交互（如选择不同的联系方式）时，根据条件动态切换或修改校验规则。通过使用Vue的数据响应式原理，在用户交互时改变规则数组，并通过Vue的DOM更新机制来重新执行校验逻辑。 ...
简单方便的表单拖拽设计器（vue+ElementUI）
01-13
- 2021-02-08: 增加级联选择器（包含省市区联动） - 2021-02-14: 增加附件组件 - 2021-03-23: 增加dialogList,支持更多信息展示的列表 - 2021-06-28: 更新文本组件，增加字体颜色，字体大小，居中布局 ………………
vue基于element的区间选择组件
10-18
此外，为了提升用户体验，还可以考虑添加实时校验，即在用户输入时立即进行校验，而不仅仅是失去焦点时。 总的来说，Vue 和 Element UI 的组合为我们提供了一种灵活的方式来构建自定义组件，以满足项目中的特殊需求...
elementUI中表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验；
CuiCui_web的博客
06-19 3312
现在有这样一个变态的需求吧，在elementUI表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验； 也就是说，必填项为空，我失去焦点，是不能给出提示的，表单也不能标红；失去焦点只能校验其他规则，比如邮箱格式，手机号格式等；当我点击提交或确定按钮，所有的为空的表单给出提示，且标红。 下图为效果图： 如果你看过elementUI底层源码，你就知道这个校验规则是用的第三方开源库，async-validator 当你在规则中写入{ required: true,
Element ui中如何对el-select进行失焦校验
shn_207的博客
04-14 923
el-select失焦校验
el-select的表单验证问题
jichunhui1992的博客
01-07 1751
先说需求把，做一个下拉框要求必填，问题是当触发了表单校验之后发现之后,再选择下拉选项的表单校验的提示信息文字并不能清除。 思路就是把这个表单绑定的值设置成计算属性，在watch里面监听这个属性，当里面有值的时候就手动清除这个表单校验。 代码如下：(data是要校验的数据，formData是表单数据) computed:{ data(){ return this.formData.data } }, watch:{ data(val){ if(val){ this.$refs['form
element 表单中使用el-col 导致输入框无法获取焦点，点击输入无效
qq_37916164的博客
01-12 3137
el-col和el-form要慎用 在一个Vue+element 的项目中添加一个表单，因为布局问题不能使用行内表单模式，于是就想到了结合布局组件使用：(结果 在布局组件中的输入框无法获取焦点，el-col和el-row要慎用) <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-col :span="6"> <el-form-item label="客户名称">
解决Element-ui el-cascader在失去焦点时校验
felicity_zll的博客
03-31 4959
一、问题描述： 我想实现，在cascader级联选择器，失去焦点时候，如果没有选择省市区则提示valid信息； 更改前： 二、问题解决 在规则配置的时候，级联框 trigger: 'blur‘ 触发不了，只能选择 trigger: 'change'触发; 具体解决方案如下：（添加cascader失去焦点事件，在失去焦点事件中添加validField 方法只验证 address） //级联框代码 <el-form-item label="省/市/区" prop="address"&g
el-form表单校验不通过时提示具体字段校验未通过并且将页面定位到校验错误位置
qq_45660256的博客
11-02 614
form 表单校验不通过 提示字段并滚动到该字段位置
elemeng-ui 中el-form 表单如何校验
m0_57142556的博客
06-07 132
elemeng-ui 中el-form 表单如何校验： 表单有一个rules属性,它的值是一个数组,里边每一项是一个对象包含着每一条校验规则: trigger:'blur' 是指当表单失去焦点时开始校验； message是当校验失败时的提示信息； rules的值也可以是变量,在data中进行赋值： 举例是： <el-form-item label="年龄" prop="age" :rules="[ { required: true, mes.
el-cascader表单校验不生效
02-22
el-cascader是Element UI库中的一个组件，用于实现级联选择器。在使用el-cascader组件时，如果表单校验不生效，可能有以下几个原因： 1. 表单校验规则未设置：在el-cascader组件中，需要通过设置rules属性来定义表单校验规则。如果没有设置rules属性或者设置的规则不正确，表单校验就不会生效。可以通过在rules属性中定义校验规则来解决该问题。 2. 表单校验触发时机不正确：表单校验需要在特定的时机触发才能生效。通常情况下，可以在表单提交或者表单字段失去焦点时触发校验。如果没有正确设置触发时机，表单校验也会失效。可以通过设置触发时机来解决该问题。 3. 表单校验提示信息未显示：即使表单校验生效了，但是如果提示信息没有正确显示，用户可能无法得知校验结果。可以通过设置错误提示信息的方式来解决该问题。 以上是el-cascader表单校验不生效的一些可能原因和解决方法，希望对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值