JavaScript控制只能输入正整数及小数且为小数时保留两位小数

这篇博客分享了一个JavaScript函数,用于验证input输入,确保输入值为正整数或小数,且小数部分最多保留两位。函数通过正则表达式实现,适用于输入金额场景,解决了网上教程错误或不完整的问题。

开发应用时经常遇到输入金额的 input 要做数据验证,保证 input 只能输入正整数及小数且为小数时保留两位小数,虽然很常用但是每次重新写起来也很麻烦,还是整理记录一下。网上搜到的文章不是错的就是缺这少那,吐槽一下:难道转别人帖子都不自行验证吗?

虽然很简单,还是整理下思路:
首先明确业务规则,存在一个文本输入栏, 只能输入正整数及小数且为小数时保留两位小数。
那么理论上就会有以下一些限制:
1、只能输入数字及小数点。
2、小数点不能在最前,也不能在最后,且只能存在最多1个小数点。
3、数字为小数时,小数点后只能保留两位小数。

function setNum(obj)
{
	//替换掉数字和小数点 . 之外的字符
	obj.value = obj.value.replace(/[^\d.]/g,"");
	//把2个以上的小数点 . 替换成一个小数点 . 
	obj.value = obj.value.replace(/\.{2,}/g,".");
	//保证第一个字符为数字而不是小数点 .
	obj.value = obj.value.replace(/^\./g,"");
	//保证最后一个字符为数字而不是小数点 .
	obj.value = obj.value.replace(/\.$/g,"");
	//保证小数点 . 只出现一次,而不能出现两次以上
	obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
	//只能输入两个小数
	obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
}

然后绑定到 input 的 onblur 事件就可以使用了。

<think>首先,用户的问题是:"我想获取一个正则表达式,用于验证输入只能为整数或最多保留两位小数"。我需要根据系统级指令来回答。 系统级指令的关键点: - 所有行内数学表达式必须使用 $...$ 格式。 - 独立公式必须使用 $$...$$ 格式并单独成段。 - LaTeX 语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识,例如:[^1]。 用户可见层的指令: - 回答结构清晰,帮助用户逐步解决问题。 - 保证回答真实可靠。 参考的引用: - 引用[1]:讨论了验证八位整数和两位小数正则表达式。 - 引用[2]:关于金额最多保留两位小数正则表达式。 - 引用[3]:C#中验证整数和带两位小数小数。 - 引用[4]:限制输入数字最多两位小数的新写法。 用户需求是:正则表达式验证输入只能是整数或最多保留两位小数。这意味着输入可以是: - 整数(例如:123, 0) - 小数(例如:0.12, 123.45),但小数部分最多两位。 基于引用,我可以构建一个正则表达式。参考引用[1],它提供了多个部分: - ^0\.[0-9]{1,2}$ :验证0.12类型的小数。 - ^0$ :验证数字0。 - ^[1-9]\d{0,7}\.\d{1,2}$ :验证456.32类型的小数(第一位非0)。 - ^[1-9]\d{0,7}$ :验证全是整数的数字(第一位非0)。 但用户需求包括整数可以是0,所以需要处理0的情况。引用[1]中提到了 ^0$ 和 ^0\.[0-9]{1,2}$。 引用[3]强调了可能需要多个表达式通过“或”运算组合。 引用[4]提供了一种新写法,但可能更复杂。 我需要一个完整的正则表达式覆盖: - 整数:可以是0或正整数(没有小数部分)。 - 小数:可以有小数部分,但小数部分最多两位。 常见错误: - 允许前导零(如012),但通常整数不应有前导零,除非是0本身。 - 小数部分不足两位(如0.1)应该允许。 所以,正则表达式应该匹配: 1. 整数:0 或 正整数(第一位非0,除非是0)。 2. 小数:整数部分可以是0或正整数小数部分1-2位。 分解: - 整数部分:0 或 [1-9]\d*(表示0或正整数,没有前导零)。 - 小数部分:可选,如果有,必须是 . 后跟1-2位数字。 因此,正则表达式可以写成: - 匹配整数:^0$ 或 ^[1-9]\d*$ - 匹配小数:^0\.\d{1,2}$ 或 ^[1-9]\d*\.\d{1,2}$ 但整数部分可以是0,所以小数部分以0开头只能是0.xx,如0.12。 组合起来,使用“或”操作符 |。 所以,整体正则表达式: ^ (0 | [1-9]\d*) (\.\d{1,2})? $ 但需要确保小数部分如果存在,必须完整。 更精确地: - 情况1:整数:^0$ 或 ^[1-9]\d*$ - 情况2:小数:^0\.\d{1,2}$ 或 ^[1-9]\d*\.\d{1,2}$ 合并: ^(0|[1-9]\d*)(\.\d{1,2})?$ 测试: - 0:匹配 - 123:匹配 - 0.12:匹配 - 0.1:匹配(小数部分1位,应该允许) - 123.45:匹配 - 012:不匹配(前导零,正确) - 0.123:不匹配(小数部分三位) - .12:不匹配(缺少整数部分) - 空字符串:不匹配(因为有^和$) 这似乎正确。 引用[1]中也有类似,但包括了八位整数限制,用户没有指定整数位数,所以应该不限制整数位数,除非必要。 用户说“整数”,没有指定位数,所以整数部分可以是任意长度正整数或0。 在正则表达式中,\d* 允许任意长度,但可能性能问题,但对于验证输入,通常输入较短,所以ok。 引用[2]提到:^[1-9]\d{0,7}\.\d{1,2}$ 等,但限制了整数部分最多8位,用户没有要求,所以去掉限制。 引用[4]有更复杂的,但可能不需要。 所以,我建议的正则表达式是: ^(0|[1-9]\d*)(\.\d{1,2})?$ 在LaTeX中,行内数学表达式用 $...$,但这里是正则表达式,不是数学公式,所以不需要LaTeX格式?系统指令说“所有行内数学表达式(包括变量、不等式、方程等)必须使用$...$格式”,但正则表达式不是数学表达式,它是字符串。所以,我应该用代码块或直接写字符串。 在回答中,我可以写正则表达式作为代码。 现在,回答结构: - 逐步解决问题:先解释需求,然后构建正则表达式,最后给出完整表达式。 - 使用中文。 - 生成相关问题。 - 添加引用标识:在引用的地方加 [^n]。 参考引用: - 引用[1]:提供了部分正则表达式。 - 引用[3]:提到了使用多个表达式或运算。 - 引用[4]:解释了正则表达式组。 所以,在回答中,我可以提到基于这些引用。 完整回答: 1. 介绍:用户需要一个正则表达式验证输入为整数或最多两位小数。 2. 分析需求:输入必须匹配整数或小数格式,小数部分最多两位。 3. 构建正则表达式:基于引用,组合多个部分。 4. 给出正则表达式: ^(0|[1-9]\d*)(\.\d{1,2})?$ 5. 解释:这个表达式匹配以0开头或正整数开头(无前导零),后跟可选的小数部分(小数点后1-2位数字)。 6. 测试用例:列出一些例子。 7. 添加引用:在解释引用。 8. 生成相关问题。 相关问题: - 如何测试正则表达式? - 这个正则表达式如何处理负数?(用户没有要求负数,所以当前不支持) - 正则表达式中的性能考虑? - 如何在特定编程语言中使用这个正则表达式? 基于用户问题,相关问题: 1. 这个正则表达式在哪些编程语言中有效? 2. 如何修改正则表达式允许负数? 3. 正则表达式验证输入,如何处理边界情况? 4. 是否有更高效的正则表达式实现? 最后,输出格式:由于是文本,我需要确保结构清晰。</think>### 正则表达式验证整数或最多两位小数 根据您的需求,我将逐步解释如何构建一个正则表达式,用于验证输入只能是整数(包括0)或最多保留两位小数小数(例如,123、0.12、123.45)。验证的关键点包括: - 整数部分:可以是0或正整数(不允许前导零,如012无效)。 - 小数部分:如果存在,必须包含小数点(.),后跟1到2位数字(例如,0.1 或 0.12 有效,但 0.123 无效)。 - 整个输入必须完整匹配(从开头到结尾),避免部分匹配。 我将参考站内提供的正则表达式知识(如引用[1]、[3]、[4]),结合您的需求,构建一个可靠的正则表达式正则表达式通常使用“或”运算(|)组合多个子模式,以覆盖不同情况[^3]。 #### 步骤1: 需求分析 - **整数匹配**:输入如 "0"、"123" 等。整数部分不能有前导零(除非是0本身),因此模式为: - "0" 单独匹配。 - 正整数:以1-9开头,后跟任意位数字(\d*)。 - **小数匹配**:输入如 "0.12"、"123.45" 等。小数部分必须满足: - 小数点后必须有1-2位数字(例如,".12" 有效,但 ".1" 或 ".123" 无效)。 - 整数部分可以是0或正整数(同整数规则)。 - **组合规则**:使用“或”运算将整数和小数模式合并,确保整个字符串匹配。 #### 步骤2: 构建正则表达式 基于引用[1]和[3],正则表达式可以分解为多个子模式,并通过 | 组合: - **子模式1: 纯整数**: - "0" 或正整数:`^(0|[1-9]\d*)$`。 - `^` 表示字符串开头,`$` 表示字符串结尾。 - `0` 匹配数字0。 - `[1-9]\d*` 匹配正整数(第一位1-9,后跟0或多个数字)。 - **子模式2: 小数**: - 以0开头的小数:`^0\.\d{1,2}$`。 - `0\.` 匹配 "0."。 - `\d{1,2}` 匹配1-2位数字。 - 以正整数开头的小数:`^[1-9]\d*\.\d{1,2}$`。 - `[1-9]\d*\.` 匹配正整数部分和小数点。 - `\d{1,2}` 匹配小数部分。 - **合并子模式**:使用 | 将上述模式组合成一个完整表达式。最终正则表达式为: ```regex ^(0|[1-9]\d*)(\.\d{1,2})?$|^0\.\d{1,2}$ ``` 但此表达式有冗余(如 "0" 被重复覆盖),可以优化为更简洁的版本: ```regex ^(0|[1-9]\d*)(\.\d{1,2})?$ ``` 解释: - `^(0|[1-9]\d*)`:匹配整数部分(0或正整数)。 - `(\.\d{1,2})?`:可选的小数部分,其中 `\.` 匹配小数点,`\d{1,2}` 匹配1-2位数字。 - `$`:确保字符串结束。 - 此表达式覆盖所有情况: - 整数:如 "0"、"123"。 - 小数:如 "0.1"、"0.12"、"123.45"(小数部分1-2位)。 引用[4]解释了正则表达式组匹配(例如,`(\.\d{1,2})` 是一个捕获组),但本表达式更简洁,无需复杂分组[^4]。 #### 步骤3: 完整正则表达式及测试 最终推荐的正则表达式: ```regex ^(0|[1-9]\d*)(\.\d{1,2})?$ ``` **测试用例**(验证是否匹配): - 有效输入: - 整数: "0"(匹配)、"123"(匹配)。 - 小数: "0.1"(匹配)、"0.12"(匹配)、"123.45"(匹配)。 - 无效输入: - "012"(不匹配,整数前导零无效)。 - "0.123"(不匹配,小数部分超过两位)。 - ".12"(不匹配,缺少整数部分)。 - "abc"(不匹配,非数字字符)。 - 空字符串(不匹配)。 您可以在正则表达式测试工具(如 regex101.com)中验证此表达式。在编程语言中(如 Python、JavaScript 或 C#),使用需转义字符(如 C# 中需写为 `@"^(0|[1-9]\d*)(\.\d{1,2})?$"`)[^3]。 #### 注意事项 - **边界处理**:此表达式确保整个输入严格匹配(从 ^ 到 $),避免部分匹配(如 "123abc" 无效)。 - **性能**:对于常规输入,此表达式高效;但如果输入很长(如百万位整数),可能性能下降,但实际场景中罕见。 - **扩展性**:如果您需要支持负数或更复杂格式,可修改表达式(见相关问题)。 此方案基于引用[1]和[3]的“或”运算思想,确保可靠性和可读性[^1][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值