JS 正則實現(xiàn)數(shù)字檢測和限制輸入，包括整數(shù)、浮點數(shù)、負數(shù)（親測可用）

---

網(wǎng)上搜了一下，居然可以直接拿來用的很少，要么就是只能檢測正整數(shù)、要么是只能檢測浮點數(shù)，總之很多都不適合，而H5提供的type="number"又只允許輸入正數(shù)（負號會被認定為非法字符），有所限制。有的時候?qū)傩?maxlength 也會失效。

用正則寫一個數(shù)字檢測函數(shù)也不難，經(jīng)測試（親測有效😄），完全可用！

---

實現(xiàn)功能：數(shù)字檢測和限制輸入

數(shù)字包括：

正/負整數(shù)，例如 1，-1

正/負浮點數(shù)，例如 -0.1，0.1

限制輸入：

當輸入-, ., 0~9 以外的字符時，input 輸入框自動刪除該字符，也就是不允許輸入該字符。

錯誤檢測：

當出現(xiàn)重復的 -, .，報錯，不允許提交。

長度限制：

防止 maxlength 失效，限制數(shù)字（包括字符）的長度，比如這里我限制長度為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，表明輸入時觸發(fā)事件，做到實時檢測。

長度限制

n=9; // 設置長度 if(value.length>n) // 取值，若超過n，則slice切片value=value.slice(0,n);

限制數(shù)字類字符輸入

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

用''空字符替換除\d,-,.之外的一切字符，也就是說，當輸入上述三個字符之外的任意字符，都將立即被刪除。

數(shù)字檢測

但是，value.replace(/[^\d-.]/g,'');有個弊端，就是可以重復輸入-,.這兩個被允許輸入的字符，比如 --1, 2.3.4 這樣的不合法數(shù)，因此就需要再對輸入的數(shù)進行校驗。

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

這里 /^(-?\d+)\.?(\d*)$/ 的想法是，一個合法數(shù)，不管是整數(shù)還是浮點數(shù)，都必須要以至少一個數(shù)字開頭，所以 ^\d+. 若是負數(shù)，則還必須在開頭存在一個負號，那么 ^(-?\d+)。若是浮點數(shù)，則還須在數(shù)字中間的部分存在一小數(shù)點，而小數(shù)點后的數(shù)字可有可無（當小數(shù)點后的數(shù)字不存在時，認為是整數(shù)），那么 .?(\d*) .

---

轉(zhuǎn)載需注明出處：?? Sylvan Ding’s blog

總結(jié)

以上是生活随笔為你收集整理的js正则检测输入内容为数字,包括负数,整数,浮点数,亲测可用.JS检测整数,js检测浮点数,js检测负数,js检测数字,js限制输入框只输入数字,解决H5 number类型只能输入正数问题.的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。