element中el-input组件限制输入条件(数字、特殊字符)

news2024/12/23 14:53:43

1、只能输入纯数字

<el-input v-model="aaa" type="text" @input="(v)=>(aaa=v.replace(/[^\d]/g,''))" />

2、只能输入纯数字和小数(比如:6.66)

<el-input v-model="aaa" type="text" @input="(v)=>(aaa=v.replace(/[^\d.]/g,''))" />

3、禁止输入特殊字符

1. 在vue原型上定义全局方法

Vue.prototype.validForbid = function (value) { value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '').replace(/\s/g, ""); return value; }

2. 组件中使用、input调用该方法

<el-input :value="name" @input="e => name = validForbid (e)"></el-input>

4、只能输入数组和字母(A123456)

<el-input v-model="aaa"  @input="(v)=>(aaa = v.replace(/[^\a-\z\A-\Z0-9]/g, ''))" ></el-input>

5、数字类型限制的话可以使用el-input-number

<el-input-number v-model="a" placeholder="请输入" :controls="false"></el-input-number>

官方文档地址文档地址:

Element - The world's most popular Vue UI framework

参考资料:element中el-input组件限制输入条件(数字、特殊字符) - 掘金

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/786974.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Rocky Linux 8.4在Tesla P100服务器里的部署及显卡cudnn安装-极度精简

安装Rocky linux教程 https://developer.aliyun.com/article/1074889 注意事项 Tesla P100服务器&#xff0c;按Delete进入bios,设置Daul模式&#xff0c;第一选项选UEFI hard disk(用驱动盘选这个)&#xff0c;usb的就选UEFI usb 安装rocky linux时&#xff0c;这两项默认&…

搭扑克牌塔题解

输入样例&#xff1a; 5 3 14 15 24 1输出样例&#xff1a; 1 2 1 3 0思路分析&#xff1a; 首先搭每个金字塔所需的扑克牌数并不会由n决定&#xff0c;所以我首先想到打表。抱着信心尝试一番之后 既然文件太大提交不了&#xff0c;那我们就放弃:&#xff0c;怎么可能&…

day39-Password Strength Background(密码强度背景)

50 天学习 50 个项目 - HTMLCSS and JavaScript day39-Password Strength Background&#xff08;密码强度背景&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name&quo…

【MySQL】之复合查询

【MySQL】之复合查询 基本查询多表查询笛卡尔积自连接子查询单行子查询多行子查询多列子查询在from子句中使用子查询 合并查询小练习 基本查询 查询工资高于500或岗位为MANAGER的雇员&#xff0c;同时还要满足他们的姓名首字母为大写的J按照部门号升序而雇员的工资降序排序使用…

WebRTC Simulcast介绍

原文地址&#x1f447; https://blog.livekit.io/an-introduction-to-webrtc-simulcast-6c5f1f6402eb/ 你想知道的关于Simulcast的一切 Simulcast是WebRTC中最酷的功能之一,它允许WebRTC会议在参与者网络连接不可预测的情况下进行扩展。在这篇文章中,我们将深入探讨Simulcas…

uniapp使用自定义导航栏和手机自带的状态栏重叠

【问题界面】&#xff1a; 【正常界面】&#xff1a; 【解决方法】&#xff1a; 在页面顶部添加代码<!-- #ifndef H5 --> <statusBar></statusBar> <!-- #endif --> 2.引入占位条并注册 import statusBar from "/uni_modules/uni-nav-bar/c…

基于云平台的智慧养殖远程监控系统

项目背景 冬春季节每天的温度和昼夜温差变化很大&#xff0c;为保证养殖动物有一个温暖舒适的生存环境&#xff0c;使动物的生产性能得到较好的发挥&#xff0c;须注意做好温度、湿度、通风等方面的控制。 智慧养殖智能监控系统可以实现对如温度、湿度、气体浓度、光照度等参数…

2023五大自动化测试的 Python 框架

自2018年被评选为编程语言以来&#xff0c;Python在各大排行榜上一直都是名列前茅。目前&#xff0c;它在Tiobe指数中排名第三个&#xff0c;仅次于Java和C。随着该编程语言的广泛使用&#xff0c;基于Python的自动化测试框架也应运而生&#xff0c;且不断发展与丰富。 因此&a…

golang+layui提升界面美化度--[推荐]

一、背景 golanglayui提升界面美化度--[推荐]&#xff1b; golang后端写的页面很难看&#xff0c;如何好看点呢&#xff0c;那就是layui https://layui.dev/ 也是一个简单上手容易使用的框架&#xff0c;类似jquery&#xff0c;对于后端开发来说满足使用需求 二、使用注意点…

input 框如何移动光标,设置光标位置?

获取 input 光标位置 const inputDom document.getElementById("input") const selectionStart inputDom.selectionStart设置 input 光标 inputDom.focus() // focus() 异步&#xff0c;所以加了 setTimeout setTimeout(() > {const nextSelection selection…

Linux进程概念(续)

引入 我们先来看一段代码 #include<stdio.h> #include <unistd.h>int g_val200;//全局变量 int main() {int resfork();if(res>0)//father{printf("我是父进程。我的全局变量 g_val%d,他的地址是 %p\n",g_val,&g_val);}else if(res0)//子进程{g…

day38-Mobile Tab Navigation(手机tab栏导航切换)

50 天学习 50 个项目 - HTMLCSS and JavaScript day38-Mobile Tab Navigation&#xff08;手机tab栏导航切换&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"…

Cesium态势标绘专题-多边形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

mybatis_使用

第一步&#xff1a; 编写接口 第二步&#xff1a; 编写对应的mapper中的sql语句 第三步&#xff1a; 测试 CRUD <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http…

喜报 | 擎创科技入选2023中国金融科技竞争力百强榜

2023中关村金融科技论坛——第七届金融科技与金融安全峰会已圆满落幕。本次峰会主要围绕银行科技、保险科技、新一代信息技术、互联网3.0展开专题论坛&#xff0c;共有千余位金融机构和科技公司相互分享研究成果、探索前沿知识、交流实践经验。 会议上正式公布了“2023中国金融…

C++ 引用型别未定义

什么是引用型别未定义呢&#xff1f;&#xff08;首先是基本数据类型的&#xff09; 在使用函数的时候&#xff0c;我们在给函数传参的时候可能会传入一个左值也可能是右值。当我们使用如下函数funtion的时候&#xff0c;会在控制台打印什么样的结果呢&#xff1f;&#xff08;…

fastadmin框架重定向

由于&#xff0c;我们一打开fastadmin框架就进入到前端页面很麻烦&#xff0c;下面这种方法可以解决这个问题。 首先我们找到这个路径 找到重定向&#xff0c; application》index》controller》index 原本文件是这个样子&#xff1a; <?phpnamespace app\index\controll…

Redisson实现简单消息队列:优雅解决缓存清理冲突

在项目中&#xff0c;缓存是提高应用性能和响应速度的关键手段之一。然而&#xff0c;当多个模块在短时间内发布工单并且需要清理同一个接口的缓存时&#xff0c;容易引发缓存清理冲突&#xff0c;导致缓存失效的问题。为了解决这一难题&#xff0c;我们采用Redisson的消息队列…

SuperCLUE中文大模型排行榜(2023年7月)

中文通用大模型综合性测评基准&#xff08;SuperCLUE&#xff09;&#xff0c;是针对中文可用的通用大模型的一个测评基准。 它主要要回答的问题是&#xff1a;在当前通用大模型大力发展的情况下&#xff0c;中文大模型的效果情况。包括但不限于&#xff1a;这些模型哪些…

思科设备静态路由配置

一、静态路由基本知识 路由器的主要功能就是用来转发IP 数据包以使数据包到达正确的目的主机。可以想象数据包到达路由器就像一辆汽车开到十字路口&#xff0c;路由表就类似路标&#xff0c;列出可能到达的目的地&#xff0c;以及应该选择哪条路到达目的地。 路由器必须要有相应…