【经验分享】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] || ''  //开头只能允许数字或者 -

},

在这两个同时设置后,就把输入限制的死死的了,如果您还有别的方法欢迎评论区交流哈。

最后

如果说

友友们之间的点赞

展现的是相互之间的支持,善意和友情

那么

你对我文章的认真阅读

则是对我的劳动成果的

默默地承认和支持

每一次创文的过程

都是我锻炼自己逻辑思维能力和语言组织能力的过程

也是我

不断深悟生活,思考人生的过程

每一篇文章的形成

都是我心血的结晶

感谢您的阅读

以上就是今天的分享,欢迎关注我,点赞评论!~

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-20 19:06:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-20 19:06:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-20 19:06:02       82 阅读
  4. Python语言-面向对象

    2024-03-20 19:06:02       91 阅读

热门阅读

  1. Http的缓存有哪些

    2024-03-20 19:06:02       48 阅读
  2. rust学习(简单handler实现)

    2024-03-20 19:06:02       40 阅读
  3. 第1章:Python基础:变量与表达式的深度解析

    2024-03-20 19:06:02       42 阅读
  4. Redis热点数据和冷数据的理解

    2024-03-20 19:06:02       40 阅读
  5. 洛谷刷题 | P8635 [蓝桥杯 2016 省 AB] 四平方和

    2024-03-20 19:06:02       42 阅读
  6. 用c语言统计m~n之间素数的个数,并求素数的和。

    2024-03-20 19:06:02       37 阅读
  7. 定时任务框架

    2024-03-20 19:06:02       44 阅读
  8. Rust基础教程

    2024-03-20 19:06:02       35 阅读