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限制输入内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

微信小程序实现吸顶盒效果
这篇文章主要为大家详细介绍了微信小程序实现吸顶盒效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JavaScript?ES6模块导入和导出的方法
ES6在语言标准的层面上实现了模块功能,而且实现的相当简单,完全可以取代CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案,下面这篇文章主要给大家介绍了关于ES6模块导入和导出的方法,需要的朋友可以参考下
2022-07-07
js用类封装pop弹窗组件
这篇文章主要为大家详细介绍了js用类封装pop弹窗组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
JS使用canvas中的measureText方法测量字体宽度示例
这篇文章主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下
2019-02-02
Bootstrap实现提示框和弹出框效果
这篇文章主要为大家详细介绍了Bootstrap实现弹出框和提示框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
微信小程序视图容器和基本内容组件图文详解
小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序,下面这篇文章主要给大家介绍了关于微信小程序视图容器和基本内容组件的相关资料,需要的朋友可以参考下
2022-07-07
JS实现圆形进度条拖拽滑动
这篇文章主要为大家详细介绍了JS实现圆形进度条拖拽滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
Echarts图例组件的属性与源代码
图例组件展现了不同系列的标记(symbol),颜色和名字,可以通过点击图例控制哪些系列不显示,这篇文章主要给大家介绍了关于Echarts图例组件的相关资料,需要的朋友可以参考下
2021-06-06
Webkit的跨域安全问题说明
在使用try catch处理iframe跨域产生的异常时，chrome和safari浏览器似乎不能正常运作：他们直接抛出了错误而没有抛出可供JS截获的异常。
2011-09-09
js计算系统当前日期是星期几的方法
这篇文章主要为大家详细介绍了js计算系统当前日期是星期几4种方法,需要的朋友可以参考下
2016-07-07