目录
前言背景:
本文主要是记录,el-input怎么限制输入只允许输入浮点型。注意是输入的时候限制只允许输入浮点型,而不是输入完提交的时候再校验提示哦!
解决之路:
1.input输入的限制,在vue中一般考虑 @input @input.native onkeyup oninput等,当然还有@blur,@change。但是我们这边前提是输入就只允许输入浮点型,也就是数字和小数点,再多点考虑一个正负号。
2.所以我本次记录的方法,在针对element-ui中的el-input进行限制输入。采用两个同时限制。
<el-input type="text" ref="contentInput" v-model="oneData.content"
oninput ="value = value.replace(/[^0-9.-]/g,'')"
@input="handleInput('content')"
@change="changedata"
></el-input>
①输入替换,只允许输入数字和小数点.和减号-:
如果只用这个会输入的时候能够输入多个小数点,不符合浮点型格式,就算粘贴来的的也要符合
oninput ="value = value.replace(/[^0-9.-]/g,'')"
②校验格式替换:
如果只用这个也是可以的,但是在输入中文时,拼音还是会打入到输入框中
handleInput(name){
this.oneData[name] = this.oneData[name]
.replace(/[^\-\d.]/g, '') //只能输入 数字 小数点 -
.replace(/\-{2,}/g, "-") // 只能出现一次-
.replace(/^0+(\d)/, '$1') //如果第一位是 0 就替换成后面的数字
.replace(/^\./, '0.') //如果第一位是 . 就 替换成 0.
.match(/^[\d\-]*(\.?\d{0,5})/g)[0] || '' //开头只能允许数字或者 -
},
在这两个同时设置后,就把输入限制的死死的了,如果您还有别的方法欢迎评论区交流哈。
最后
如果说
友友们之间的点赞
展现的是相互之间的支持,善意和友情
那么
你对我文章的认真阅读
则是对我的劳动成果的
默默地承认和支持
每一次创文的过程
都是我锻炼自己逻辑思维能力和语言组织能力的过程
也是我
不断深悟生活,思考人生的过程
每一篇文章的形成
都是我心血的结晶
感谢您的阅读