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

只会应用不懂原理的程序员

已于 2023-07-24 15:02:41 修改

阅读量1w

点赞数 9

文章标签： vue.js javascript 前端

于 2023-07-24 14:58:35 首次发布

本文链接：https://blog.csdn.net/m0_71231013/article/details/131895904

版权

文章介绍了在Vue.js环境下，使用el-input组件时如何通过正则表达式限制用户输入，包括只允许输入纯数字、数字和小数、禁止输入特殊字符以及只允许输入字母和数字。同时提到了el-input-number组件用于数字类型的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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