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

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

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

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

数字包括：

限制输入：

当输入-,.,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

js正则检测输入内容为数字 包括负数 整数 浮点数 亲测可用.JS检测整数 js检测浮点数 js检测负数 js检测数字 js限制输入框只输入数字 解决H5 number类型只能输入正数问题.