我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Elementui如何限制el-input框输入小数点

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Elementui如何限制el-input框输入小数点

限制el-input框输入小数点

<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input>

oninput(num, limit) {
  var str = num
  var len1 = str.substr(0, 1)
  var len2 = str.substr(1, 1)
  //如果第一位是0,第二位不是点,就用数字把点替换掉
  if (str.length > 1 && len1 == 0 && len2 != ".") {
    str = str.substr(1, 1)
  }
  //第一位不能是.
  if (len1 == ".") {
    str = ""
  }
  //限制只能输入一个小数点
  if (str.indexOf(".") != -1) {
    var str_ = str.substr(str.indexOf(".") + 1)
    if (str_.indexOf(".") != -1) {
      str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
    }
  }
  //正则替换
  str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
  if (limit / 1 === 1) {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/,'$1') // 小数点后只能输 1 位
  } else {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1') // 小数点后只能输 2 位
  }
  return str
}

el-input 仅限保留两位小数问题

废话不多说:

 <el-form-item
     label="概率值(100%)"
     rules="[{ required: true, message: '请填写概率值,仅限两位小数'},{pattern:/^\d{1,2}(\.\d{1,2})?$/, message: '概率权重精确到两位小数点,勿超过100'}]"
                    prop="weight">
    <el-input type="number" step="0.01" v-model.number="lotteryBonusCfg.weight" autocomplete="off"></el-input>
</el-form-item>

关键是:正则:/^\d{1,2}(.\d{1,2})?$/

但是这个功能有个bug,就是无法输入0.01,input会直接失去焦点,数字变成0.

解决办法

v-model.number ==》 v-model=“lotteryBonusCfg.weight”

即可输入0.01,或者1.01

以上仅为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Elementui如何限制el-input框输入小数点

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Elementui如何限制el-input框输入小数点

这篇文章主要介绍了Elementui如何限制el-input框输入小数点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

vue el-input输入框输入不了如何解决

本文小编为大家详细介绍“vue el-input输入框输入不了如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue el-input输入框输入不了如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一
2023-07-04

如何在HTML中限制input 输入框只能输入纯数字

如何在HTML中限制输入框只能输入纯数字?有多种方法,包括:inputmode属性设置输入模式为"numeric"pattern属性指定正则表达式允许"[0-9]+"oninput事件验证输入是否为数字JavaScript正则表达式验证HTML5number输入类型CSS数字键盘最佳实践:优先使用inputmode属性。考虑结合多个验证方法。提供输入指南。处理无效输入。测试和验证解决方案。
如何在HTML中限制input 输入框只能输入纯数字
2024-04-02

HTML怎么限制input输入框只输入纯数字

这篇文章主要介绍HTML怎么限制input输入框只输入纯数字,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!限制input输入框只输入纯数字的方法:通过oninput事件,在事件中使用replace()函数配合正则表达
2023-06-14

HTML怎么限制input输入框只能输入纯数字

小编给大家分享一下HTML怎么限制input输入框只能输入纯数字,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html有什么特点1、简易性:超级文本标记语言版本升
2023-06-14

input输入框限制只能输入数字的方法实例(个人认为最好的)

在很多业务中需要对输入框进行字符限制,比如金额输入框、手机号码输入框等,下面这篇文章主要给大家介绍了关于input输入框限制只能输入数字的相关资料,文中介绍的方法个人认为最好的,需要的朋友可以参考下
2022-11-13

JS限制input框只能输入0~100的正整数的两种方法

本文提供了两种方法来限制输入框仅能输入0~100的正整数:方法一:正则表达式使用正则表达式来验证输入,并根据验证结果允许或清空输入。方法二:HTML5限制属性使用min和max属性来限制输入范围,简单易用,但限制性更强。两种方法各有优缺点,选择方法应根据具体的需求和优先级。
JS限制input框只能输入0~100的正整数的两种方法
2024-04-02

jquery如何限制文本框中输入的字符数量

本篇内容介绍了“jquery如何限制文本框中输入的字符数量”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在jQuery中,我们可以使用att
2023-07-05

python如何限制输入数字的范围

在Python中,可以使用条件语句来限制输入数字的范围。以下是一个示例代码:```pythonwhile True:try:num = int(input("请输入一个数字:"))if num 100:raise ValueError("
2023-08-23

编程热搜

目录