html、js对input输入数字,长度和范围限制

JavaScript013

html、js对input输入数字,长度和范围限制,第1张

input属性为number,做if判断,然后slice选取 (目前使用过此方法,比较简单)用于添加地址时的手机号码框

input限制只能输入数字并限制长度

js控制input只能输入数字和小数点后两位,输入其他自动清除方法

可以使用如下正则表达式来限制输入框的输入内容:

/^(?!0\d|\.-|\.\.|-0\d|-)(?!.*\.\..*)(?!.*--.*)(?!.*-$)([1-9][0-9]*|0)(\.[0-9]{0,10})?$/

该正则表达式的解释如下:

^:匹配输入的字符串开头。

(?!0\d|\.-|\.\.|-0\d|-):负向先行断言,表示输入的字符串不能以 0 开头、.-、..、-0 开头或 - 结尾。

(?!.*\.\..*)(?!.*--.*):负向先行断言,表示输入的字符串不能包含两个及以上的连续 . 或 --。

(?!.*-$):负向先行断言,表示输入的字符串不能以 - 结尾。

([1-9][0-9]*|0):表示输入的字符串必须为数字,可以以 0 或者 1-9 开头,后面跟着 0 个或多个数字。

(\.[0-9]{0,10})?:表示输入的字符串可以包含小数点和最多 10 位小数。

$:匹配输入的字符串结尾。

可以将该正则表达式应用到输入框的 oninput 或 onkeydown 事件中,以便实时验证用户输入的内容,并在输入不符合要求时阻止输入。例如:

const input = document.querySelector('#myInput')

input.addEventListener('input', (event) =>{

const value = event.target.value

const isValid = /^(?!0\d|\.-|\.\.|-0\d|-)(?!.*\.\..*)(?!.*--.*)(?!.*-$)([1-9][0-9]*|0)(\.[0-9]{0,10})?$/.test(value)

if (!isValid) {

event.target.value = value.slice(0, -1)// 阻止输入

}

})

在这个例子中,我们首先获取了一个 id 为 myInput 的输入框,并添加了一个 input 事件监听器。在事件处理程序中,我们获取了输入框的值,并使用正则表达式对其进行验证。如果验证失败,我们阻止输入,即将输入框的值设为原来的值减去最后一位。这样,就能够实现对输入框的限制。

js支持的整数的有效范围是,-2的53次方至2的53次方 也就是-9007199254740992~9007199254740992。 可以在浏览器里输入在这个范围之外的数试试,返回的值多数跟输入不一样。 实际应用,后台传过来的是16位整数,可能会导致一些查询操作得不到正确的结果 因此建议传递16位及以上的整数时,转化为字符串传输。