首页 前端知识 element中el-input组件限制输入条件(数字、特殊字符)

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

2024-01-29 13:01:31 前端知识 前端哥 304 469 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/726.html
标签
评论
发布的文章

HTML5 css3课后习题【一】

2024-02-10 19:02:20

css3 table表格

2024-02-10 19:02:01

CSS 基础知识 选择器

2024-02-10 19:02:50

float,flex和grid布局

2024-02-10 19:02:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!