javascript
js正则检测输入内容为数字,包括负数,整数,浮点数,亲测可用.JS检测整数,js检测浮点数,js检测负数,js检测数字,js限制输入框只输入数字,解决H5 number类型只能输入正数问题.
JS 正則實(shí)現(xiàn)數(shù)字檢測(cè)和限制輸入,包括整數(shù)、浮點(diǎn)數(shù)、負(fù)數(shù)(親測(cè)可用)
網(wǎng)上搜了一下,居然可以直接拿來(lái)用的很少,要么就是只能檢測(cè)正整數(shù)、要么是只能檢測(cè)浮點(diǎn)數(shù),總之很多都不適合,而H5提供的type="number"又只允許輸入正數(shù)(負(fù)號(hào)會(huì)被認(rèn)定為非法字符),有所限制。有的時(shí)候?qū)傩?maxlength 也會(huì)失效。
用正則寫一個(gè)數(shù)字檢測(cè)函數(shù)也不難,經(jīng)測(cè)試(親測(cè)有效😄),完全可用!
實(shí)現(xiàn)功能:數(shù)字檢測(cè)和限制輸入
數(shù)字包括:
限制輸入:
當(dāng)輸入-, ., 0~9 以外的字符時(shí),input 輸入框自動(dòng)刪除該字符,也就是不允許輸入該字符。
錯(cuò)誤檢測(cè):
當(dāng)出現(xiàn)重復(fù)的 -, .,報(bào)錯(cuò),不允許提交。
長(zhǎng)度限制:
防止 maxlength 失效,限制數(shù)字(包括字符)的長(zhǎng)度,比如這里我限制長(zhǎng)度為9.
代碼
直接放代碼,比較簡(jiǎn)單。
<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,表明輸入時(shí)觸發(fā)事件,做到實(shí)時(shí)檢測(cè)。
長(zhǎng)度限制
n=9; // 設(shè)置長(zhǎng)度 if(value.length>n) // 取值,若超過(guò)n,則slice切片value=value.slice(0,n);限制數(shù)字類字符輸入
value=value.replace(/[^\d-.]/g,'');用''空字符替換除\d,-,.之外的一切字符,也就是說(shuō),當(dāng)輸入上述三個(gè)字符之外的任意字符,都將立即被刪除。
數(shù)字檢測(cè)
但是,value.replace(/[^\d-.]/g,'');有個(gè)弊端,就是可以重復(fù)輸入-,.這兩個(gè)被允許輸入的字符,比如 --1, 2.3.4 這樣的不合法數(shù),因此就需要再對(duì)輸入的數(shù)進(jìn)行校驗(yàn)。
function number_check(input_box) {reg = /^(-?\d+)\.?(\d*)$/;這里 /^(-?\d+)\.?(\d*)$/ 的想法是,一個(gè)合法數(shù),不管是整數(shù)還是浮點(diǎn)數(shù),都必須要以至少一個(gè)數(shù)字開頭,所以 ^\d+. 若是負(fù)數(shù),則還必須在開頭存在一個(gè)負(fù)號(hào),那么 ^(-?\d+)。若是浮點(diǎn)數(shù),則還須在數(shù)字中間的部分存在一小數(shù)點(diǎn),而小數(shù)點(diǎn)后的數(shù)字可有可無(wú)(當(dāng)小數(shù)點(diǎn)后的數(shù)字不存在時(shí),認(rèn)為是整數(shù)),那么 .?(\d*) .
轉(zhuǎn)載需注明出處:?? Sylvan Ding’s blog
總結(jié)
以上是生活随笔為你收集整理的js正则检测输入内容为数字,包括负数,整数,浮点数,亲测可用.JS检测整数,js检测浮点数,js检测负数,js检测数字,js限制输入框只输入数字,解决H5 number类型只能输入正数问题.的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 彩色的砖块
- 下一篇: 【剑指offer】面试题38:字符串的排