当前位置: 首页 > news >正文

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

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.lryc.cn/news/98932.html

相关文章:

  • 会议OA项目之会议发布(一)
  • 【Android】对象为null的一个原因:在方法内部,重新创建了一个新的对象并将其赋值给原对象,但这并不会改变原始的原对象的引用
  • macbook 软件iMovie for Mac(专业视频剪辑工具)中文版
  • web APIs-练习一
  • AX88179A千兆网卡芯片,支持switch联网
  • Pytorch个人学习记录总结 05
  • windows部署安装redis安装教程
  • Jmeter post请求传参问题
  • 对Windows应用程序进行代码签名
  • 2022 China Open Source Report
  • postgresql|数据库|启动数据库时报错:FATAL: could not map anonymous shared memory的解决
  • 数字签名与数字证书
  • 基于Jquery EasyUI JSZip FileSaver的简单使用
  • git远程一个分支对应本地两个分支推送
  • SpringCloud学习—Hystrix:服务熔断
  • 8款常用系统镜像烧录软件
  • 设计模式什么情况下适合使用呢?
  • Docker和K8s区别,使用场景,具体怎么使用以及详细命令
  • K8S集群创建和管理,以及常用命令
  • HarmonyOS/OpenHarmony元服务开发-卡片使用动效能力
  • 【FusionInsight HD】FusionInsight HD 651创建集群-Yarn
  • MQ, RocketMQ, 安装
  • Python将COCO格式实例分割数据集转换为YOLO格式实例分割数据集
  • 借助 Mybatis 的动态 SQL 解决传参不确定问题
  • 前端框架学习-Vue(一)
  • Elasticsearch Query DSL
  • 腾讯云 CODING × K+ 峰会再次携手开启软件行业新风向
  • 2023年发布的25个开源大型语言模型总结
  • Istio网关Gateway 启用TLS
  • slam建图与定位_cartographer代码阅读(7)后端约束构建