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

2023-11-08

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组件限制输入条件(数字、特殊字符) - 掘金

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • postgresql添加postgis注意事项

    安装postgresql和postgis必须安装在同一目录下 这样才可以安装成功 其他安装步骤网上资料很多 推荐这个https wenku baidu com view ac2b40ab284ac850ad0242f3 html 进入pos
  • Best of Articles :: Microsoft Smartphone Programming

    This sort of book is a collection of different articles combined under related chapters Chapter 1 Introduction to the NE
  • 数据可视化学习笔记:Python实现汽车品牌销售量矩形树图

    引言 本文将介绍如何使用 Python 和 Pyecharts 库创建一个汽车品牌销售量的矩形树图 我们将使用 Pandas 读取 CSV 文件数据 然后对数据进行处理 封装 最后将数据可视化为矩形树图 准备工作 首先 我们需要先安装好相关
  • PHP源码安装脚本

    bin bash Author Mr Wu PHP安装脚本 WARNING 如网速不好 需上传php 8 1 9 tar gz包 2023 3 2 22 55 55 定义变量 dep pack epel release make apr p
  • 全国城市房价分析(pandas)

    中国主要城市的房价可以从https www creprice cn rank index html获取 该网页中会显示上一个月的房价排行情况 先复制前10个城市的数据 然后使用pd read clipboard 读取 我们来分析一下该月的数
  • 28个python爬虫项目,看完这些你离爬虫高手就不远了

    互联网的数据爆炸式的增长 而利用 Python 爬虫我们可以获取大量有价值的数据 1 爬取数据 进行市场调研和商业分析 爬取知乎优质答案 筛选各话题下最优质的内容 抓取房产网站买卖信息 分析房价变化趋势 做不同区域的房价分析 爬取招聘网站职
  • 数据库事务的隔离等级

    数据库的事务隔离级别有4个 由低到高依次是Read uncommitted Read Committed Repeatable read Serializable 这四个级别可以逐个解决脏读 不可重复读 幻读等问题 Tables 脏读 不可
  • 5G房子将会进一步带来更多的就业机会

    此次微信和支付宝面向市场推出的刷脸支付的产品 在安全上做了极大的努力 通过数据层层加密 保障了商户的资金安全 同时也为消费者带来了全新的消费体验 减少了商户在高峰期人流量分流的问题 与传统的聚合二维码收银台形成了优势互补的作用 通过微信和支
  • 如何使用sort快速排序

    试题 算法提高 快速排序 提交此题 评测记录 资源限制时间限制 1 0s 内存限制 256 0MB问题描述 用递归来实现快速排序 quick sort 算法 快速排序算法的基本思路是 假设要对一个数组a进行排序 且a 0 x 首先对数组中的
  • Unity3d + UGUI 的多分辨率适配

    原文地址 http blog csdn net dingkun520wy article details 49471789 1 Canvas的属性配置 2 Canvas Scaler
  • Spark Streaming的流数据处理和分析

    一 Spark Streaming 1 Spark Streaming概述 1 1 实时数据处理的动机 以前所未有的速度创造数据 来自移动 网络 社交 物联网的指数数据增长 联网设备 2012年为9B 到2020年将达到50B 到2020年
  • 2023年Python面试题_Python基础_42道

    什么是 Python Python 是一种编程语言 它有对象 模块 线程 异常处理和自动内存管理 可以加入其他语言的对比 Python 是一种解释型语言 Python 在代码运行之前不需要解释 Python 是动态类型语言 在声明变量时 不
  • linux中mariadb数据库升级

    前言 在使用mariadb的数据库 mysql有同样的问题 过程中 发现老版本的数据库的一些问题 1 自增字段是在内存里的 数据库重启后就会丢失 新的自增字段是根据表中已有数据的最大值 1 数据表的如果没有记录 自增字段又从头开始了 2 数
  • Python入门自学进阶-Web框架——23、DjangoAdmin项目应用-定制页面

    一 单个菜单页面实现 类似DjangoAdmin中点击一个管理表打开的样子 以客户首页为例 这里cust index就是路由表中的name字段的值 即别名 对应的就是路由项中的cust html 即对应视图函数cust index 视图函数
  • CREATE TABLE 语句

    CREATE TABLE 语句用于创建数据库中的表 语法 CREATE TABLE table name column name1 data type size column name2 data type size column name
  • fwknop SPA服务端源码编译

    fwknop 源码编译 1 背景介绍 2 源码编译 2 1 源码获取 2 2 环境介绍 2 3 对git克隆下来的代码直接进行编译 2 4 挑选出C 部分的服务端进行编译 1 背景介绍 fwknop实现的是SPA Single Packet
  • 初识 flex & bison

    基本概念 flex 和 bison 经常结合使用 分别用于词法分析和语法分析 词法分析器 flex flex 用于生成词法分析器或者说是扫描器 scanner 它将输入的文本分解为称为 tokens 的序列 每个 token 都有一个特定的
  • VSCode下载慢问题

    进入VSCode官网根据自己的电脑选择相应的版本后下载 但是下载过程超级慢 有时候下载一半断开 让人有点崩溃 解决方法 改为国内镜像 打开谷歌浏览器下载内容 找到正下载的vscode 点击上图的链接 跳转到新的窗口 将其路径中的az7642
  • Vue 项目 使用 lang=“scss“ 已经有了 sass-loader 依赖 还是报错

    原因可能是 sass loader 版本太高的原因 安装7 3 1版本 即可解决问题 cnpm install sass loader 7 3 1 save dev
  • element中el-input组件限制输入条件(数字、特殊字符)

    1 只能输入纯数字