JS 正则实现数字检测和限制输入，包括整数、浮点数、负数（亲测可用）

---

网上搜了一下，居然可以直接拿来用的很少，要么就是只能检测正整数、要么是只能检测浮点数，总之很多都不适合，而H5提供的type="number"又只允许输入正数（负号会被认定为非法字符），有所限制。有的时候属性 maxlength 也会失效。

用正则写一个数字检测函数也不难，经测试（亲测有效😄），完全可用！

---

实现功能：数字检测和限制输入

数字包括：

1. 正/负整数，例如 1，-1
2. 正/负浮点数，例如 -0.1，0.1

限制输入：

当输入-, ., 0~9 以外的字符时，input 输入框自动删除该字符，也就是不允许输入该字符。

错误检测：

当出现重复的 -, .，报错，不允许提交。

长度限制：

防止 maxlength 失效，限制数字（包括字符）的长度，比如这里我限制长度为9.

代码

直接放代码，比较简单。

<input type="text" oninput="n=9; if(value.length>n) value=value.slice(0,n); value=value.replace(/[^\d-.]/g,''); number_check(this);">

function number_check(input_box) {reg = /^(-?\d+)\.?(\d*)$/;if (input_box.value.match(reg) == null) {//... 如果匹配失败的话（输入非法）}else {//... 如果匹配成功的话（输入合法）}
}

解释

首先，制定了 oninput，表明输入时触发事件，做到实时检测。

长度限制

n=9; // 设置长度
if(value.length>n) // 取值，若超过n，则slice切片value=value.slice(0,n);

限制数字类字符输入

value=value.replace(/[^\d-.]/g,'');

用''空字符替换除\d,-,.之外的一切字符，也就是说，当输入上述三个字符之外的任意字符，都将立即被删除。

数字检测

但是，value.replace(/[^\d-.]/g,'');有个弊端，就是可以重复输入-,.这两个被允许输入的字符，比如 --1, 2.3.4 这样的不合法数，因此就需要再对输入的数进行校验。

function number_check(input_box) {reg = /^(-?\d+)\.?(\d*)$/;

这里 /^(-?\d+)\.?(\d*)$/ 的想法是，一个合法数，不管是整数还是浮点数，都必须要以至少一个数字开头，所以 ^\d+. 若是负数，则还必须在开头存在一个负号，那么 ^(-?\d+)。若是浮点数，则还须在数字中间的部分存在一小数点，而小数点后的数字可有可无（当小数点后的数字不存在时，认为是整数），那么 .?(\d*) .

---

转载需注明出处：©️ Sylvan Ding’s blog