美文网首页
html、js对input输入数字,长度和范围限制

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

作者: 锦锦_jane | 来源:发表于2020-08-06 14:06 被阅读0次

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

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

<input type="number" oninput="if(value.length>4)value=value.slice(0,4)" />

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

<input type="number" id="testinput" onkeyup="clearNoNum(this)" />
//控制只能输入小数点后2位
function clearNoNum(obj) {
       obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符   
       obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的   
       obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
       obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数   
       if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额  
            obj.value = parseFloat(obj.value);
       }
}

3. js正则匹配四位数,小数点后两位(-10000-10000)

  • 相当于匹配-9999.99 - 9999.99
    • 前面[1-9]保证第一位数字不会是0;
    • 后面[0-9]{0,3}表示0到3个数字;
  • 匹配 -10000 - 0
if (/(-10000)|(^-[1-9]\d{0,3}$)|(^-0\.\d{2}$)|(^-[1-9]\d{0,3}\.\d{2}$))/.test(number)){
  console.log('匹配正确')
}
  • 匹配 0- 10000
if (/(10000)|(^[1-9]\d{0,3}$)|(^0\.\d{2}$)|(^-[1-9]\d{0,3}\.\d{2}$))/.test(number)){
  console.log('匹配正确')
}
  • 匹配-10000-10000
if (/(^-[1-9]\d{0,3}$)|(^-0\.\d{2}$)|(^-[1-9]\d{0,3}\.\d{2}$)|(^[1-9]\d{0,3}$)|(^0\.\d{2}$)|(^[1-9]\d{0,3}\.\d{2}$)/.test(number)){
  console.log('匹配正确')
}

参考文章

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

相关文章

网友评论

      本文标题:html、js对input输入数字,长度和范围限制

      本文链接:https://www.haomeiwen.com/subject/spyzrktx.html