脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → el-input限制输入

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+Canvas实现带跳动效果的粒子动画

    JavaScript+Canvas实现带跳动效果的粒子动画

    这篇文章主要为大家详细介绍了如何通过JavaScript和Canvas实现带跳动效果的粒子动画，文中的示例代码讲解详细，感兴趣的小伙伴可以参考一下
    2023-03-03
  • 深入理解JS DOM事件机制

    深入理解JS DOM事件机制

    下面小编就为大家带来一篇深入理解JS DOM事件机制。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • uni-app全局变量的四种实现方式总结

    uni-app全局变量的四种实现方式总结

    在开发的过程中,我们不可避免的用到全局变量,比如我们的请求的公共路径这个变量,下面这篇文章主要给大家总结介绍了关于uni-app全局变量的四种实现方式,需要的朋友可以参考下
    2023-10-10
  • JavaScript prototype对象的属性说明

    JavaScript prototype对象的属性说明

    JavaScript中对象的prototype属性，是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会”继承”赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢？
    2010-03-03
  • 原生js制作日历控件实例分享

    原生js制作日历控件实例分享

    这篇文章主要为大家详细介绍了原生js制作日历控件的具体代码，一个日历控件实例，原生js开发，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 解决select2在bootstrap modal中不能正常使用的问题

    解决select2在bootstrap modal中不能正常使用的问题

    今天小编就为大家分享一篇解决select2在bootstrap modal中不能正常使用的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Javascript 实现图片无缝滚动

    Javascript 实现图片无缝滚动

    这篇文章主要介绍了Javascript 实现图片无缝滚动的相关资料,需要的朋友可以参考下
    2014-12-12
  • bootstrap实现弹窗和拖动效果

    bootstrap实现弹窗和拖动效果

    这篇文章主要介绍了bootstrap实现弹窗和拖动效果的相关资料,需要的朋友可以参考下
    2016-01-01
  • JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏代码示例

    JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏代码示例

    这篇文章主要给大家介绍了关于JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏的相关资料,脱敏的目的是保护用户隐私,一种常见的方式是显示部分字符,用星号或其他字符替代,需要的朋友可以参考下
    2024-02-02
  • 基于小程序请求接口wx.request封装的类axios请求

    基于小程序请求接口wx.request封装的类axios请求

    这篇文章主要介绍了基于小程序请求接口wx.request封装的类axios请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论