当前位置:网站首页>El input limit can only input numbers
El input limit can only input numbers
2022-06-30 08:26:00 【_ Baby grut】
el-input Limit can only enter numbers
Method 1 :
By setting type attribute :type="number"
<el-input
maxlength="11"
type="number"
v-model="ruleForm.phone"
placeholder=" Please enter contact information "
show-word-limit
></el-input>
But this approach usually affects the style , Not recommended , Pictured :
Method 2 :
By binding value constraints :v-model.number="ruleForm.phone"
But this method will limit the general number , But it will affect maxlength attribute , also e It can be entered , In general, you can use , Strictly limited words are not recommended
Method 3 :
It is recommended to use
By binding value Value for regular restriction :οnkeyup="value=value.replace(/[^\d]/g, ' ')"
Bind one onkeyup Monitoring events , /[^\d]/g Is a regular expression that matches all non numeric content , Replace it with an empty string , This approach does not affect any properties
<el-input
maxlength="11"
v-model="ruleForm.phone"
placeholder=" Please enter contact information "
show-word-limit
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
边栏推荐
- Graffiti Wi Fi & ble SoC development slide strip
- Acreems energy efficiency management platform escorts the power safety of high-rise residential areas
- [flower carving experience] 13 build the platformio ide development environment of esp32c3
- C# ListBox如何获取选中的内容(搜了很多无效的文章)
- [JUC series] overview of fork/join framework
- 【NVMe2.0b 14-4】Directive Send/Receive command
- 微信小程序使用vant weapp报错
- Enhance the add / delete operation of for loop & iterator delete collection elements
- 我们如何拿到自己满意的薪资呢?这些套路还是需要掌握的
- Sword finger offer II 075 Array relative sort (custom sort, count sort)
猜你喜欢
Build a docker image of Henkel database from 0
【NVMe2.0b 14-7】Set Features(上篇)
C # about Net cognition
TiDB v6.0.0 (DMR) :缓存表初试丨TiDB Book Rush
Redis design and Implementation (I) | data structure & object
微信公众号第三方平台开发,零基础入门。想学我教你啊
【NVMe2.0b 14-1】Abort、Asynchronous Event Request、Capacity Management command
Using typera+picgo to realize automatic uploading of markdown document pictures
swagger使用
【NVMe2.0b 14-3】Doorbell Buffer Config command、Device Self-test command
随机推荐
[JUC series] overview of fork/join framework
Cesium learning notes (VI) particle system
Sword finger offer II 075 Array relative sort (custom sort, count sort)
Camera
A troubleshooting of CPU bottom falling
Redis设计与实现(二)| 数据库(删除策略&过期淘汰策略)
F12 packet capture is used for the whole process analysis of postman interface test
【NVMe2.0b 14】NVMe Admin Command Set
php api获取二维码、组合生成图片
[kotlin collaboration process] complete the advanced kotlin collaboration process
Getordefault method of map class
文件上传 upload 组件 on-success 事件,添加自定义参数
QT event cycle
2021-05-17
Introduction to opencv (I): image reading and display
C# Console. Writeline() function output format
[untitled]
JS code case
How to handle the expired data of redis and what are the elimination mechanisms?
1. Problems related to OpenGL window and environment configuration