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)=&gt;(aaa=v.replace(/[^d.]/g,''))" />

3、禁止输入特殊字符

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

Vue.prototype.validForbid = function (value) { value = value.replace(/[`~!@#$%^&amp;*()_-+=<>?:"{}|,./;'\[]·~！@#￥%……&amp;*（）——-+={}|《》？：“”【】、；‘’，。、]/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-zA-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组件限制输入条件(数字、特殊字符) – 掘金

代码007普通

打赏 收藏 海报 链接