首页 文章

HTML min和max不适用于number属性

提问于
浏览 次
1

我有一个html表单，其中包括两个需要在一定范围内取数字的数字字段 . 我正在尝试使用min和max属性来实现这一点

<input type="number" id="AutoApprovalDelayInSeconds" min="0" max="2592000" step="1" placeholder="Range: 0 to 2592000"/>
<input type="number" id="AssignmentDurationInSeconds" min="30" max="31536000" step="1" placeholder="Range: 30 to 31536000" required/>

但是当我输入带有无效输入的表单时，它会提交没有错误显示或警告 . 我知道number属性只是一个数字的字符串表示，而不是整数或其他数字数据类型，所以我必须以某种方式使用javascript转换此输入，还是我做错了什么？谢谢！

编辑 . 我最初尝试在Firefox中打开它，我现在知道它不支持此功能 .

javascript html

2 回答

  • 3

    假设表单名称为 form ，这是一个准系统脚本 . 您应该考虑将输入类型更改为文本，这样您就不必担心跨浏览器兼容性

    <form id="form">
 <input type="text" id="AutoApprovalDelayInSeconds" step="1" placeholder="Range: 0 to 2592000">
 <input type="text" id="AssignmentDurationInSeconds" step="1" placeholder="Range: 30 to 31536000" required>
</form>

    JS

    var delay, duration, form;
     delay = document.getElementById('AutoApprovalDelayInSeconds');
     duration = document.getElementById('AssignmentDurationInSeconds');
     form = document.getElementById('form');


 form.onsubmit = function (e) {
   e.preventDefault();
   delay = parseFloat(delay.value);
   duration = parseFloat(duration.value);
   if(delay < 0 || delay > 2592000 || isNaN(delay)) {
     delay.focus();
     alert('AutoApprovalDelayInSeconds is invalid');
     return;
   }
   if(duration < 30 || duration > 31536000 || isNaN(duration)) {
     duration.focus();
     alert('AssignmentDurationInSeconds is invalid');
     return;
   }
   // all input appears to be valid so send it
   form.submit(); 
 };
    回复于
  • 2

    请记住HTML5 input[type='number'] is not supported by many browsers，真的只是Chrome和IE10（注： not Firefox ） .

    使用Chrome我限制发布表单，但在许多其他浏览器上你不会 . 如果你需要按编号限制用户输入，并想要做一些验证，那么我建议你看看JavaScript（也许是jQuery Validate） .

    回复于

相关问题