前端处理input框只能输入带小数点的数字
input框限制输入数字带小数点,可以输入千分号,不能以小数点开头,不能同时带有几个小数点,代码如下:
<input oninput = "ediform.value = validateNum(ediform.val)"></input>
const validateNum = (val:any) =>{
return val.replace(/[^\d.,]/g, '')
.replace(/^\./g, '')
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
}
解析:
1. val.replace(/[^\d.,]/g, '')
这个正则表达式的作用是移除字符串 val
中所有不是数字 (\d
)、逗号(,
)或点(.
)的字符。即,删除所有非数字、非逗号、非小数点的字符。
- 例如,如果
val = '1abc2,3.4$'
,经过这一步后,val
会变成'123.4'
。
2. val.replace(/^\./g, '')
这个正则表达式的作用是删除字符串 val
开头的点(.
)。这样做是为了避免如果用户输入的字符串以 .
开头,它将被移除。
- 例如,如果
val = '.123.45'
,这一步后会变成'123.45'
。
3. val.replace('.', '$#$')
这个操作将字符串中的第一个点(.
)替换为特殊符号 '$#$'
。这是因为下一步操作需要处理字符串中的其他点(.
)。
- 例如,如果
val = '123.45'
,它会变成'123$#\$45'
。
4. val.replace(/\./g, '')
这一步将字符串中所有的点(.
)删除。此时,已经替换掉第一个点的地方是 '$#$'
,因此其他的点(.
)将被移除。
- 例如,如果
val = '123$#\$45'
,它会变成'12345'
。
5. val.replace('$#$', '.')
最后,这一步将 '$#$'
替换回一个点(.
),即将之前替换掉的第一个点恢复。
- 例如,如果
val = '12345'
,它会变成'123.45'
。