el-input限制输入只允许输入浮点型的解决思路
更新时间：2024年03月20日 17:05:53 作者：啥咕啦呛
本文主要是记录,el-input怎么限制输入只允许输入浮点型,注意是输入的时候限制只允许输入浮点型,而不是输入完提交的时候再校验提示,感兴趣的朋友跟随小编一起看看吧
前言背景：
本文主要是记录，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] || '' //开头只能允许数字或者 -
},在这两个同时设置后，就把输入限制的死死的了，如果您还有别的方法欢迎评论区交流哈。
到此这篇关于el-input怎么限制输入只允许输入浮点型的文章就介绍到这了,更多相关el-input限制输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript学习教程之cookie与webstorage
这篇文章主要给大家介绍了关于JavaScript学习教程之cookie与webstorage的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了用Golang运行JavaScript的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了uniapp小程序之配置首页搜索框,我们介绍一下本次开发使用的是uniapp，本次分享内容的搜索框为禁止输入搜索框，点击跳转专属搜索页面，需要的朋友可以参考下2022-09-09
javascript判断移动端访问设备并解析对应CSS的方法
这篇文章主要介绍了javascript判断移动端访问设备并解析对应CSS的方法,涉及移动端设备的判断及动态加载技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了javascript数组遍历的方法,结合实例形式分析了javascript数组遍历及相关的some、every、filter、map等方法的使用技巧,需要的朋友可以参考下2016-09-09
在没有后端提供数据的情况下,前端人员在自己写demo或者练手项目的时候可以使用mock.js来模拟数据,本文主要介绍了mock.js模拟数据的实现,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了使用js转化毫秒为时间格式的具体实现,需要的朋友可以参考下2014-04-04![Javascript的console['''']常用输入方法汇总](//img.jbzj.com/images/xgimg/bcimg7.png)
Javascript的console['''']常用输入方法汇总
本文给大家带来了十几种Javascript的console['']常用输入方法，每种方法给大家介绍的都很详细，需要的朋友参考下吧2018-04-04
Layui 是一个非常流行的前端框架,其中的table组件可以帮助您实现复选框功能,下面这篇文章主要给大家介绍了关于前端layui table表格勾选事件以及常见模块的相关资料,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了javascript实现自由编辑图片代码详解，在当下的的前端项目中，图片功能可以说是非常常见的，图片的展示、图片的裁剪编辑、图片的上传等，那么我们的项目便来了个需求。,需要的朋友可以参考下2019-06-06
![Javascript的console['''']常用输入方法汇总](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论