HTML 最小值和最大值不适用于数字属性

Question

我有一个 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 中打开它，但我现在知道它不支持此功能。

Answer 1

请记住 HTML5 input[type='number'] is not supported by many browsers，实际上只是 Chrome 和 IE10（注意：不是 Firefox）。

使用 Chrome 时我被限制发布表单，但在许多其他浏览器上你不会。如果您真的需要通过数字限制用户输入，并且想要进行一些验证，那么我建议您使用 JavaScript（可能是 jQuery Validate）。

Answer 2

假设表单名称为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(); 
 };