element中input事件失去焦点的时候触发手机验证函数

最新推荐文章于 2024-05-27 14:49:48 发布
最新推荐文章于 2024-05-27 14:49:48 发布
阅读量2.2k 收藏
点赞数 2
分类专栏： element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anny_mei/article/details/107338781
版权

我的项目需求是在失去焦点的时候触发函数调用接口查询手机号是否重复
在这里插入图片描述
调接口验证手机是否重复
在这里插入图片描述

Vue 3.2.3 中结合 Element Plus 的 el-input 组件实现账户和验证码绑定功能：失去焦点时判断账户与上次输入不同时重新获取图形验证码 （防抖请求）
专注于计算机研发知识和资讯分享
03-08 355
在账户与上次输入不同时重新获取图形验证码的功能
vue element el-input 搜索功能实现防抖 @input事件请求频繁
King Saj
02-23 2020
效果 不要使用el-input的@input事件，使用这个事件，使用防抖无效 代码: <template> <div> <el-input type="number" v-model="form.batchNumber" placeholder="请输入批次" /> </div> </template> <script> export default { data() { return {
element input组件自动失去焦点问题解决
天问博客-专注于大前端技术
01-10 5623
最近在 Vue3 + ElementPlus 中，使用 el-input 组件时，如果设置了 v-model，那么在每次改变内容后后，input 会自动失去焦点，这样会导致用户无法输入多个字符。
input回车触发事件_多好的交互:enter、blur触发相同事件,为啥enter就走了2次
weixin_39535287的博客
12-01 515
解决2次回调 <el-input v-model="input" placeholder="请输入内容" @keyup.enter.native="getList" @blur="getList" > </el-input>「背景」：想开开心心敲代码，没料到一不小心又写了个bug。。。正常的动作就是：每次blur时，如果值有变更就提给咱后段大佬计算一下，然后重新刷新列表...
js--input失焦验证手机号是否合法
黑白门
03-22 1796
需求 input失交，验证手机号码是否为空，校验手机号是否合法 tips： js失焦方法：onblur="isPhone(this.value);" 正则表达式验证手机号方法：var RegCellPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; 包含时间为2019年3月前手机号段 <input id="phoneNumber" p...
element ui 的el-input输入一个字后失去焦点，需重新点击输入框才能再次输入
qq_45067263的博客
05-27 2852
我是form表单嵌套表格，里面的el-input输入框，输入第一个值的时候会突然失去焦点，需要再次点击输入框才能正常输入，原因是table的key值，需要改成正常的index即可，如果你是循环的，也改为index就行。
input 事件_你不知道的DOM输入事件
weixin_39966376的博客
11-29 850
测试代码简单到吓人，甚至于事件都可以写在一个字符串里，用空格分开，不过我觉得太长了不好看，测试浏览器为Chrome 80。<!DOCTYPE html> 针对输入框，我们知道最常见的两个事件是input和change，change是在回车确认或者输入框失去焦点的时候触发，这估计是大多数人所知道的关于输入的事件了。下面我们再深入挖掘一下在DOM里跟输入有关的事件。事件概览跟输入有关的事件...
element-ui组件中input等的change事件中传递自定义参数
10-16
需要注意的是，在Vue.js中，所有的数据绑定和事件处理器都是在Vue实例的上下文中进行的，因此在事件处理函数中引用的数据应该是Vue实例中的数据，或者是通过事件传递来的参数。 对于Element UI组件，其使用方法基本...
详解element-ui中表单验证的三种方式
10-16
这种方式允许我们在验证规则中添加一个validator函数，该函数接收当前字段的值和验证规则对象作为参数，并且可以执行任何自定义的验证逻辑。这种方式非常适合复杂的验证场景。例如，定义新密码和确认密码的验证规则...
解决angularJS中input标签的ng-change事件无效问题
10-18
`ng-change`是AngularJS提供的一个指令，当输入元素（如`<input>`、`<select>`或`<textarea>`）的值发生变化并且失去焦点后，它会触发绑定的函数。这个变化检测基于AngularJS的脏检查机制，即当模型值发生变化时，...
element-ui的表单正则校验
热门推荐
weixin_66375317的博客
05-25 1万+
element-ui的表单正则校验
input输入限制
weixin_44868881的博客
09-01 1016
输入大小写字母、数字、下划线： <input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 输入小写字母、数字、下划线： <input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 输入数字和点 <input type="text" onkeyup="value=value.repla
Element表单输入框失焦向服务端验证(Vue实现)
布克吉的博客
09-18 817
主要原理通过rules中的validator 函数回调实现，CheckAttributes为接口函数，根据请求结果判断输入框内容是否已存在，再通过callback(new Error('数据已存在的提示词')))：无论返回结果是什么，都要加上else{ callback() } 形成一个闭环，前言：一般情况下，表单的作用为：输入数据->正则验证格式->提交到后端数据验证。而遇到输入项较多时，如果费老大劲把数据填完，提交返回。本文介绍表单输入数据，失焦立即验证内容。
input 失去焦点时，验证表单名称是否为唯一值
xiaoming4965的博客
01-17 352
验证表单名称是否为唯一值
element 表单的input循环生成，并可单个input失去焦点单个验证并保存； （多个表单实例）...
weixin_34391854的博客
07-10 641
<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" 　　　...
Web前端篇——el-input失去焦点事件监听
u011391361的博客
01-10 2252
el-input失去焦点事件监听
iview 表单验证
beyond513222的博客
11-04 299
<template> <i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="80"> <Form-item label="姓名" prop="name"> <i-input :value.sync="formValidate.name" placeholder="请输入姓名"></i...
【Vue中的@blur@input事件解读】
qq_44712196的博客
09-22 3440
当输入框失去焦点时，触发blur事件，并调用Vue实例中的validateSingle方法对indexInfo.score进行验证，然后再调用getRightVal方法对其进行处理，确保它的值符合要求。：当输入框的值发生变化时，触发input事件，并调用Vue实例中的getRightVal方法来对indexInfo.score进行处理，确保它的值符合要求。示例代码中，当用户完成输入总分并且焦点移开时，对输入进行验证会触发@blur事件，会出现消息提示框——”请输入指标名“
el-input 输入后失去焦点
carbonzhao的专栏
11-07 2012
外面的v-for循环的key使用了元素的name属性，而恰好我们的name动态双向绑定给了input,故而在。遇到这种神奇的BUG，也是大家无奈的神情。input输入变化时触发了外层的刷新导致每输入一个字符后input失去焦点，影响输入。修改方案如下：将:key赋值一个不变的值！避免动态刷新此dom!
el-input失去焦点事件onblur
最新发布
03-14
### 关于 Element UI 中 `el-input` 组件的失去焦点事件 在使用 Element UI 的 `el-input` 组件时，可以通过监听其原生的 `blur` 事件来实现失去焦点的功能。具体来说，在 Vue.js 中可以绑定 `@blur` 或者 `v-on:blur` 来处理该事件。 以下是具体的实现方式： #### HTML 结构 ```html <template> <div id="app"> <!-- 使用 el-input 并绑定 blur 事件 --> <el-input v-model="inputValue" @blur="handleBlur" placeholder="请输入内容"></el-input> </div> </template> ``` #### JavaScript 部分 ```javascript <script> new Vue({ el: '#app', data() { return { inputValue: '' // 输入框绑定的数据模型 }; }, methods: { handleBlur(event) { console.log('输入框失去了焦点', event.target.value); // 可在此处执行其他逻辑操作 } } }); </script> ``` 上述代码展示了如何通过 Vue 实现对 `el-input` 组件失去焦点事件的监听[^3]。当用户点击到页面上的其他位置或者切换至另一个表单控件时，会触发 `handleBlur` 方法，并打印当前输入框中的值。 另外需要注意的是，如果希望进一步自定义样式（比如移除数字输入框默认的上下箭头），可以根据提供的 CSS 样式进行调整[^2]。 #### 完整示例代码 综合以上功能，下面是一个完整的例子，包含了去除数字输入框的上下按钮以及失焦事件处理： ```html <div id="app"> <el-input v-model="inputValue" type="number" class="num-input" clearable @blur="handleBlur" placeholder="请输入数字"></el-input> </div> <style> .num-input input::-webkit-outer-spin-button, .num-input input::-webkit-inner-spin-button { -webkit-appearance: none; } .num-input input[type="number"] { -moz-appearance: textfield; } .num-input input { border: none; } </style> <script> new Vue({ el: '#app', data() { return { inputValue: '' }; }, methods: { handleBlur(event) { console.log('输入框失去了焦点，当前值为:', event.target.value); } } }); </script> ``` 此段代码不仅实现了失去焦点后的回调函数调用，还利用了特定的 CSS 属性隐藏了浏览器对于数值型输入框自带的增减按钮。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值