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转换此输入，还是我做错了什么？谢谢！

EDIT。我最初尝试在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(); 
 };

HTML min和max不适用于number属性

2 个答案: