当前位置: 首页 > article >正文

前端处理input框只能输入带小数点的数字

 input框限制输入数字带小数点,可以输入千分号,不能以小数点开头,不能同时带有几个小数点,代码如下:

<input oninput = "ediform.value = validateNum(ediform.val)"></input>

const validateNum = (val:any) =>{

return val.replace(/[^\d.,]/g, '')

.replace(/^\./g, '') 

.replace('.', '$#$') 

.replace(/\./g, '')

.replace('$#$', '.')

}

 解析:

1. val.replace(/[^\d.,]/g, '')

这个正则表达式的作用是移除字符串 val 中所有不是数字 (\d)、逗号(,)或点(.)的字符。即,删除所有非数字、非逗号、非小数点的字符。

  • 例如,如果 val = '1abc2,3.4$',经过这一步后,val 会变成 '123.4'

2. val.replace(/^\./g, '')

这个正则表达式的作用是删除字符串 val 开头的点(.)。这样做是为了避免如果用户输入的字符串以 . 开头,它将被移除。

  • 例如,如果 val = '.123.45',这一步后会变成 '123.45'

3. val.replace('.', '$#$')

这个操作将字符串中的第一个点(.)替换为特殊符号 '$#$'。这是因为下一步操作需要处理字符串中的其他点(.)。

  • 例如,如果 val = '123.45',它会变成 '123$#\$45'

4. val.replace(/\./g, '')

这一步将字符串中所有的点(.)删除。此时,已经替换掉第一个点的地方是 '$#$',因此其他的点(.)将被移除。

  • 例如,如果 val = '123$#\$45',它会变成 '12345'

5. val.replace('$#$', '.')

最后,这一步将 '$#$' 替换回一个点(.),即将之前替换掉的第一个点恢复。

  • 例如,如果 val = '12345',它会变成 '123.45'

http://www.kler.cn/a/400531.html

相关文章:

  • sqli—labs靶场 5-8关 (每日4关练习)持续更新!!!
  • Debezium-MySqlConnectorTask
  • 有限状态机(续)
  • Android Activity Manager Service (AMS) 深入详解及源码分析
  • PgSQL汇总
  • PyTorch使用教程-深度学习框架
  • gin源码阅读(1)URL中的参数是如何解析的?
  • FastApi学习第二天:Pydantic对数据的校验和Form表单数据
  • 力扣题解661 图片平滑器
  • 三周精通FastAPI:42 手动运行服务器 - Uvicorn Gunicorn with Uvicorn
  • 群控系统服务端开发模式-应用开发-前端管理员功能开发
  • BLE 蓝牙客户端和服务器连接
  • 纯前端实现语音文字互转
  • 大模型实操练习二、文心大模型API使用方法(入门阶段)
  • 离散数学笔记
  • 【ASR技术】WhisperX安装使用
  • 【论文阅读】InstructPix2Pix: Learning to Follow Image Editing Instructions
  • 键盘上打出反引号符号(´),即单个上标的撇号(这个符号与反引号 ` 不同,反引号通常位于键盘的左上角)
  • DBeaver MACOS 安装 并连接到docker安装的mysql
  • Android 开发与救砖工具介绍
  • Fisher矩阵和Hessian矩阵的关系:证明Fisher为负对数似然函数的Hessian的期望
  • LeetCode 2816.翻倍以链表形式表示的数字
  • 消息队列原理面试题及参考答案
  • 手搓神经网络(MLP)解决MNIST手写数字识别问题 | 数学推导+代码实现 | 仅用numpy,tensor和torch基本计算 | 含正反向传播数学推导
  • 开源控件:Qt/C++自定义颜色组合框控件ColorComboBox
  • 深度学习:循环神经网络的计算复杂度,顺序操作和最大路径长度