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

您所在的位置：网站首页 › 整数z包括负数吗 › js正则检测输入内容为数字,包括负数,整数,浮点数,亲测可用.JS检测整数,js检测浮点数,js检测负数,js检测数字,js限制输入框只输入数字,解决H5 number类型只能输入正数问题.

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

2024-07-14 08:30| 来源: 网络整理| 查看: 265

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

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

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

实现功能：数字检测和限制输入数字包括：正/负整数，例如 1，-1正/负浮点数，例如 -0.1，0.1 限制输入：

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

错误检测：

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

长度限制：

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

代码

直接放代码，比较简单。

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*) .

【本文地址】

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

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

今日新闻

推荐新闻